Move attachment preview above the composer, allowing to add captions …

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesFlowNode.kt

@@ -30,8 +30,6 @@ import io.element.android.features.location.api.Location
 import io.element.android.features.location.api.SendLocationEntryPoint
 import io.element.android.features.location.api.ShowLocationEntryPoint
 import io.element.android.features.messages.api.MessagesEntryPoint
-import io.element.android.features.messages.impl.attachments.Attachment
-import io.element.android.features.messages.impl.attachments.preview.AttachmentsPreviewNode
 import io.element.android.features.messages.impl.forward.ForwardMessagesNode
 import io.element.android.features.messages.impl.pinned.PinnedEventsTimelineProvider
 import io.element.android.features.messages.impl.pinned.list.PinnedMessagesListNode
@@ -73,7 +71,6 @@ import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanTheme
 import io.element.android.libraries.textcomposer.mentions.MentionSpanTheme
 import io.element.android.services.analytics.api.AnalyticsService
 import io.element.android.services.analyticsproviders.api.trackers.captureInteraction
-import kotlinx.collections.immutable.ImmutableList
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import kotlinx.parcelize.Parcelize
@@ -118,9 +115,6 @@ class MessagesFlowNode @AssistedInject constructor(
             val thumbnailSource: MediaSource?,
         ) : NavTarget
 
-        @Parcelize
-        data class AttachmentPreview(val attachment: Attachment) : NavTarget
-
         @Parcelize
         data class LocationViewer(val location: Location, val description: String?) : NavTarget
 
@@ -176,10 +170,6 @@ class MessagesFlowNode @AssistedInject constructor(
                         return processEventClick(event)
                     }
 
-                    override fun onPreviewAttachments(attachments: ImmutableList<Attachment>) {
-                        backstack.push(NavTarget.AttachmentPreview(attachments.first()))
-                    }
-
                     override fun onUserDataClick(userId: UserId) {
                         callbacks.forEach { it.onUserDataClick(userId) }
                     }
@@ -238,10 +228,6 @@ class MessagesFlowNode @AssistedInject constructor(
                 )
                 createNode<MediaViewerNode>(buildContext, listOf(inputs))
             }
-            is NavTarget.AttachmentPreview -> {
-                val inputs = AttachmentsPreviewNode.Inputs(navTarget.attachment)
-                createNode<AttachmentsPreviewNode>(buildContext, listOf(inputs))
-            }
             is NavTarget.LocationViewer -> {
                 val inputs = ShowLocationEntryPoint.Inputs(navTarget.location, navTarget.description)
                 showLocationEntryPoint.createNode(this, buildContext, inputs)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesNode.kt

@@ -26,7 +26,6 @@ import com.bumble.appyx.core.plugin.plugins
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
-import io.element.android.features.messages.impl.attachments.Attachment
 import io.element.android.features.messages.impl.messagecomposer.MessageComposerEvents
 import io.element.android.features.messages.impl.timeline.TimelineEvents
 import io.element.android.features.messages.impl.timeline.di.LocalTimelineItemPresenterFactories
@@ -51,7 +50,6 @@ import io.element.android.libraries.matrix.api.room.alias.matches
 import io.element.android.libraries.matrix.api.timeline.item.TimelineItemDebugInfo
 import io.element.android.libraries.mediaplayer.api.MediaPlayer
 import io.element.android.services.analytics.api.AnalyticsService
-import kotlinx.collections.immutable.ImmutableList
 
 @ContributesNode(RoomScope::class)
 class MessagesNode @AssistedInject constructor(
@@ -76,7 +74,6 @@ class MessagesNode @AssistedInject constructor(
     interface Callback : Plugin {
         fun onRoomDetailsClick()
         fun onEventClick(event: TimelineItem.Event): Boolean
-        fun onPreviewAttachments(attachments: ImmutableList<Attachment>)
         fun onUserDataClick(userId: UserId)
         fun onPermalinkClick(data: PermalinkData)
         fun onShowEventDebugInfoClick(eventId: EventId?, debugInfo: TimelineItemDebugInfo)
@@ -115,10 +112,6 @@ class MessagesNode @AssistedInject constructor(
             .orFalse()
     }
 
-    private fun onPreviewAttachments(attachments: ImmutableList<Attachment>) {
-        callbacks.forEach { it.onPreviewAttachments(attachments) }
-    }
-
     private fun onUserDataClick(userId: UserId) {
         callbacks.forEach { it.onUserDataClick(userId) }
     }
@@ -208,7 +201,6 @@ class MessagesNode @AssistedInject constructor(
                 onBackClick = this::navigateUp,
                 onRoomDetailsClick = this::onRoomDetailsClick,
                 onEventClick = this::onEventClick,
-                onPreviewAttachments = this::onPreviewAttachments,
                 onUserDataClick = this::onUserDataClick,
                 onLinkClick = { onLinkClick(context, it, state.timelineState.eventSink) },
                 onSendLocationClick = this::onSendLocationClick,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -32,10 +32,8 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -56,7 +54,7 @@ import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.actionlist.ActionListEvents
 import io.element.android.features.messages.impl.actionlist.ActionListView
 import io.element.android.features.messages.impl.actionlist.model.TimelineItemAction
-import io.element.android.features.messages.impl.attachments.Attachment
+import io.element.android.features.messages.impl.attachments.preview.AttachmentsPreviewView
 import io.element.android.features.messages.impl.messagecomposer.AttachmentsBottomSheet
 import io.element.android.features.messages.impl.messagecomposer.AttachmentsState
 import io.element.android.features.messages.impl.messagecomposer.MessageComposerEvents
@@ -117,7 +115,6 @@ fun MessagesView(
     onEventClick: (event: TimelineItem.Event) -> Boolean,
     onUserDataClick: (UserId) -> Unit,
     onLinkClick: (String) -> Unit,
-    onPreviewAttachments: (ImmutableList<Attachment>) -> Unit,
     onSendLocationClick: () -> Unit,
     onCreatePollClick: () -> Unit,
     onJoinCallClick: () -> Unit,
@@ -133,7 +130,6 @@ fun MessagesView(
 
     AttachmentStateView(
         state = state.composerState.attachmentsState,
-        onPreviewAttachments = onPreviewAttachments,
         onCancel = { state.composerState.eventSink(MessageComposerEvents.CancelSendAttachment) },
     )
 
@@ -278,17 +274,11 @@ private fun ReinviteDialog(state: MessagesState) {
 @Composable
 private fun AttachmentStateView(
     state: AttachmentsState,
-    onPreviewAttachments: (ImmutableList<Attachment>) -> Unit,
     onCancel: () -> Unit,
 ) {
     when (state) {
         AttachmentsState.None -> Unit
-        is AttachmentsState.Previewing -> {
-            val latestOnPreviewAttachments by rememberUpdatedState(onPreviewAttachments)
-            LaunchedEffect(state) {
-                latestOnPreviewAttachments(state.attachments)
-            }
-        }
+        is AttachmentsState.Previewing -> Unit
         is AttachmentsState.Sending -> {
             ProgressDialog(
                 type = when (state) {
@@ -418,7 +408,11 @@ private fun MessagesViewContent(
             },
             sheetContentKey = sheetResizeContentKey.intValue,
             sheetTonalElevation = 0.dp,
-            sheetShadowElevation = if (state.composerState.suggestions.isNotEmpty()) 16.dp else 0.dp,
+            sheetShadowElevation =
+                if (state.composerState.suggestions.isNotEmpty() || state.composerState.attachmentsState != AttachmentsState.None)
+                    16.dp
+                else
+                    0.dp,
         )
     }
 }
@@ -447,6 +441,14 @@ private fun MessagesViewComposerBottomSheetContents(
                     state.composerState.eventSink(MessageComposerEvents.InsertSuggestion(it))
                 }
             )
+            AttachmentsPreviewView(
+                state = state.composerState.attachmentsState,
+                onDismiss = {
+                    state.composerState.eventSink(MessageComposerEvents.ClearAttachments)
+                },
+                modifier = Modifier
+                    .heightIn(max = 230.dp)
+            )
             MessageComposerView(
                 state = state.composerState,
                 voiceMessageState = state.voiceMessageComposerState,
@@ -579,7 +581,6 @@ internal fun MessagesViewPreview(@PreviewParameter(MessagesStateProvider::class)
         onEventClick = { false },
         onUserDataClick = {},
         onLinkClick = {},
-        onPreviewAttachments = {},
         onSendLocationClick = {},
         onCreatePollClick = {},
         onJoinCallClick = {},