Merge pull request #6322 from element-hq/feature/bma/iterateDesignOnAttachment

Design iteration on file attachment in the timeline

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/ElementTimelineItemPreview.kt

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.event
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.theme.messageFromMeBackground
+
+@Composable
+internal fun ElementTimelineItemPreview(
+    content: @Composable BoxScope.() -> Unit,
+) = ElementPreview {
+    Box(
+        modifier = Modifier
+            .background(ElementTheme.colors.messageFromMeBackground)
+            .padding(4.dp),
+        content = content,
+    )
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemAttachmentView.kt

@@ -9,18 +9,16 @@
 package io.element.android.features.messages.impl.timeline.components.event
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
@@ -73,17 +71,17 @@ private fun TimelineItemAttachmentHeaderView(
     val spacing = 8.dp
     Row(
         modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(spacing),
     ) {
         Box(
             modifier = Modifier
                 .size(iconSize)
-                .clip(CircleShape)
-                .background(ElementTheme.colors.bgCanvasDefault),
+                .background(ElementTheme.colors.bgCanvasDefault, RoundedCornerShape(4.dp)),
             contentAlignment = Alignment.Center,
         ) {
             icon()
         }
-        Spacer(Modifier.width(spacing))
         Column {
             Text(
                 text = filename,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemAudioView.kt

@@ -18,7 +18,6 @@ import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContentProvider
-import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
 
@@ -49,7 +48,7 @@ fun TimelineItemAudioView(
 @PreviewsDayNight
 @Composable
 internal fun TimelineItemAudioViewPreview(@PreviewParameter(TimelineItemAudioContentProvider::class) content: TimelineItemAudioContent) =
-    ElementPreview {
+    ElementTimelineItemPreview {
         TimelineItemAudioView(
             content,
             onContentLayoutChange = {},

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt

@@ -11,20 +11,21 @@ package io.element.android.features.messages.impl.timeline.components.event
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContentProvider
-import io.element.android.libraries.designsystem.icons.CompoundDrawables
-import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.ui.strings.CommonStrings
 
+/**
+ * https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=2019-6477&t=2yr7kvVEdtsP4p26-4
+ */
 @Composable
 fun TimelineItemFileView(
     content: TimelineItemFileContent,
@@ -39,12 +40,11 @@ fun TimelineItemFileView(
         modifier = modifier,
         icon = {
             Icon(
-                resourceId = CompoundDrawables.ic_compound_attachment,
+                imageVector = CompoundIcons.Attachment(),
                 contentDescription = stringResource(CommonStrings.common_file),
                 tint = ElementTheme.colors.iconPrimary,
                 modifier = Modifier
-                    .size(16.dp)
-                    .rotate(-45f),
+                    .size(16.dp),
             )
         }
     )
@@ -52,9 +52,11 @@ fun TimelineItemFileView(
 
 @PreviewsDayNight
 @Composable
-internal fun TimelineItemFileViewPreview(@PreviewParameter(TimelineItemFileContentProvider::class) content: TimelineItemFileContent) = ElementPreview {
-    TimelineItemFileView(
-        content,
-        onContentLayoutChange = {},
-    )
+internal fun TimelineItemFileViewPreview(@PreviewParameter(TimelineItemFileContentProvider::class) content: TimelineItemFileContent) {
+    ElementTimelineItemPreview {
+        TimelineItemFileView(
+            content,
+            onContentLayoutChange = {},
+        )
+    }
 }