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

…to media/attachments

Signed-off-by: Marco Antonio Alvarez <[email protected]>

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

@@ -38,8 +38,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.report.ReportMessageNode
 import io.element.android.features.messages.impl.timeline.debug.EventDebugInfoNode
@@ -77,7 +75,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
@@ -124,9 +121,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
 
@@ -173,10 +167,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) }
                     }
@@ -233,10 +223,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

@@ -35,7 +35,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.TimelineController
 import io.element.android.features.messages.impl.timeline.TimelineEvents
@@ -61,7 +60,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(
@@ -87,7 +85,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)
@@ -126,10 +123,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) }
     }
@@ -215,7 +208,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

@@ -38,10 +38,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
@@ -62,7 +60,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.mentions.MentionSuggestionsPickerView
 import io.element.android.features.messages.impl.messagecomposer.AttachmentsBottomSheet
 import io.element.android.features.messages.impl.messagecomposer.AttachmentsState
@@ -116,7 +114,6 @@ fun MessagesView(
     onEventClick: (event: TimelineItem.Event) -> Boolean,
     onUserDataClick: (UserId) -> Unit,
     onLinkClick: (String) -> Unit,
-    onPreviewAttachments: (ImmutableList<Attachment>) -> Unit,
     onSendLocationClick: () -> Unit,
     onCreatePollClick: () -> Unit,
     onJoinCallClick: () -> Unit,
@@ -131,7 +128,6 @@ fun MessagesView(
 
     AttachmentStateView(
         state = state.composerState.attachmentsState,
-        onPreviewAttachments = onPreviewAttachments,
         onCancel = { state.composerState.eventSink(MessageComposerEvents.CancelSendAttachment) },
     )
 
@@ -277,17 +273,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) {
@@ -398,7 +388,11 @@ private fun MessagesViewContent(
             },
             sheetContentKey = sheetResizeContentKey.intValue,
             sheetTonalElevation = 0.dp,
-            sheetShadowElevation = if (state.composerState.memberSuggestions.isNotEmpty()) 16.dp else 0.dp,
+            sheetShadowElevation =
+                if (state.composerState.memberSuggestions.isNotEmpty() || state.composerState.attachmentsState != AttachmentsState.None)
+                    16.dp
+                else
+                    0.dp,
         )
     }
 }
@@ -427,6 +421,14 @@ private fun MessagesViewComposerBottomSheetContents(
                     state.composerState.eventSink(MessageComposerEvents.InsertMention(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,
@@ -557,7 +559,6 @@ internal fun MessagesViewPreview(@PreviewParameter(MessagesStateProvider::class)
         onBackClick = {},
         onRoomDetailsClick = {},
         onEventClick = { false },
-        onPreviewAttachments = {},
         onUserDataClick = {},
         onLinkClick = {},
         onSendLocationClick = {},