Update message composer design for unencrypted rooms (#4361)

* Update message composer design for unencrypted rooms. * Move the encryption banner to the composer toolbar.
2025-07-28 19:21:13 +03:00
parent 14924a4546
commit be6716b30a
20 changed files with 61 additions and 67 deletions
--- a/ElementX/Sources/Other/Pills/PillViewOnBubblePreviews.swift
+++ b/ElementX/Sources/Other/Pills/PillViewOnBubblePreviews.swift
@@ -28,7 +28,7 @@ struct PillViewOnBubble_Previews: PreviewProvider, TestablePreview {
                mockMessage
                    .offset(y: -1)
                    .frame(maxWidth: .infinity, alignment: .leading)
-                    .messageComposerStyle(isEncrypted: false)
+                    .messageComposerStyle()
                
                SendButton { }
            }
--- a/ElementX/Sources/Screens/MediaUploadPreviewScreen/View/MediaUploadPreviewScreen.swift
+++ b/ElementX/Sources/Screens/MediaUploadPreviewScreen/View/MediaUploadPreviewScreen.swift
@@ -69,7 +69,7 @@ struct MediaUploadPreviewScreen: View {
                    captionWarningButton
                }
            }
-            .messageComposerStyle(isEncrypted: context.viewState.isRoomEncrypted)
+            .messageComposerStyle()
            
            SendButton {
                context.send(viewAction: .send)
--- a/ElementX/Sources/Screens/RoomScreen/ComposerToolbar/View/ComposerToolbar.swift
+++ b/ElementX/Sources/Screens/RoomScreen/ComposerToolbar/View/ComposerToolbar.swift
@@ -42,10 +42,25 @@ struct ComposerToolbar: View {
            }
        }
        .readFrame($frame)
+        .safeAreaInset(edge: .top) {
+            if !context.viewState.isRoomEncrypted {
+                Label {
+                    Text(L10n.commonNotEncrypted)
+                        .font(.compound.bodySM)
+                        .foregroundStyle(.compound.textSecondary)
+                } icon: {
+                    CompoundIcon(\.lockOff, size: .xSmall, relativeTo: .compound.bodyMD)
+                        .foregroundStyle(.compound.iconInfoPrimary)
+                }
+                .padding(4.0)
+            }
+        }
        .overlay(alignment: .bottom) {
-            if verticalSizeClass != .compact, !context.composerExpanded {
-                suggestionView
-                    .offset(y: -frame.height)
+            ZStack {
+                if verticalSizeClass != .compact, !context.composerExpanded {
+                    suggestionView
+                        .offset(y: -frame.height)
+                }
            }
        }
        .disabled(!context.viewState.canSend)
@@ -162,8 +177,7 @@ struct ComposerToolbar: View {
                        placeholder: placeholder,
                        composerFormattingEnabled: context.composerFormattingEnabled,
                        showResizeGrabber: context.composerFormattingEnabled,
-                        isExpanded: $context.composerExpanded,
-                        isEncrypted: context.viewState.isRoomEncrypted) {
+                        isExpanded: $context.composerExpanded) {
            sendMessage()
        } editAction: {
            context.send(viewAction: .editLastMessage)
@@ -236,11 +250,7 @@ struct ComposerToolbar: View {
    }
    
    private var composerPlaceholder: String {
-        if context.viewState.isRoomEncrypted {
-            return L10n.richTextEditorComposerPlaceholder
-        } else {
-            return L10n.richTextEditorComposerUnencryptedPlaceholder
-        }
+        L10n.richTextEditorComposerPlaceholder
    }
    
    private var composerView: WysiwygComposerView {
--- a/ElementX/Sources/Screens/RoomScreen/ComposerToolbar/View/MessageComposer.swift
+++ b/ElementX/Sources/Screens/RoomScreen/ComposerToolbar/View/MessageComposer.swift
@@ -24,7 +24,6 @@ struct MessageComposer: View {
    let composerFormattingEnabled: Bool
    let showResizeGrabber: Bool
    @Binding var isExpanded: Bool
-    let isEncrypted: Bool
    
    let sendAction: () -> Void
    let editAction: () -> Void
@@ -42,7 +41,7 @@ struct MessageComposer: View {
            }
            
            composerTextField
-                .messageComposerStyle(header: header, isEncrypted: isEncrypted)
+                .messageComposerStyle(header: header)
                // Explicitly disable all animations to fix weirdness with the header immediately
                // appearing whilst the text field and keyboard are still animating up to it.
                .animation(.noAnimation, value: mode)
@@ -200,8 +199,8 @@ private struct MessageComposerHeaderLabelStyle: LabelStyle {
 // MARK: - Style

 extension View {
-    func messageComposerStyle(header: some View = EmptyView(), isEncrypted: Bool) -> some View {
-        modifier(MessageComposerStyleModifier(header: header, isEncrypted: isEncrypted))
+    func messageComposerStyle(header: some View = EmptyView()) -> some View {
+        modifier(MessageComposerStyleModifier(header: header))
    }
 }

@@ -209,20 +208,14 @@ private struct MessageComposerStyleModifier<Header: View>: ViewModifier {
    private let composerShape = RoundedRectangle(cornerRadius: 21, style: .circular)
    
    let header: Header
-    let isEncrypted: Bool
    
    func body(content: Content) -> some View {
        VStack(alignment: .leading, spacing: -6) {
            header
            
-            HStack(alignment: .top, spacing: 6) {
-                icon
-                    .scaledOffset(y: 2)
-                
-                content
-                    .tint(.compound.iconAccentTertiary)
-            }
-            .padding(.vertical, 10)
+            content
+                .tint(.compound.iconAccentTertiary)
+                .padding(.vertical, 10)
        }
        .padding(.horizontal, 12.0)
        .clipShape(composerShape)
@@ -235,14 +228,6 @@ private struct MessageComposerStyleModifier<Header: View>: ViewModifier {
            }
        }
    }
-    
-    @ViewBuilder
-    private var icon: some View {
-        if !isEncrypted {
-            CompoundIcon(\.lockOff, size: .xSmall, relativeTo: .compound.bodyMD)
-                .foregroundStyle(.compound.iconInfoPrimary)
-        }
-    }
 }

 // MARK: - Previews
@@ -294,7 +279,7 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
    
    static func messageComposer(_ content: NSAttributedString = .init(string: ""),
                                mode: ComposerMode = .default,
-                                placeholder: String = L10n.richTextEditorComposerEncryptedPlaceholder) -> MessageComposer {
+                                placeholder: String = L10n.richTextEditorComposerPlaceholder) -> MessageComposer {
        let viewModel = WysiwygComposerViewModel(minHeight: 22,
                                                 maxExpandedHeight: 250)
        viewModel.setMarkdownContent(content.string)
@@ -314,7 +299,6 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
                               composerFormattingEnabled: false,
                               showResizeGrabber: false,
                               isExpanded: .constant(false),
-                               isEncrypted: false,
                               sendAction: { },
                               editAction: { },
                               pasteAction: { _ in },
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-iPad-en-GB.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-iPad-en-GB.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ff23bd65e045fb72987378893db31d89841f173c5d0ac544ec6e1dcb0b5715f6
-size 230776
+oid sha256:d0e002656c52a775cc5b576fb71e70c032f132072ce4e9886f96cb82143a3bb3
+size 209527
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-iPad-pseudo.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-iPad-pseudo.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ee42180ee15f701ee7c9510d9169d331f9bdc0d4936867480876e1c1c752e1cd
-size 235581
+oid sha256:da5f066472285215d2ce3feb1e47e66437569f960eff9fa403653e4c806a296a
+size 212824
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-iPhone-16-en-GB.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-iPhone-16-en-GB.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:10b24075681300a6e127b3e8dcdf065234f4f1946d40e1425e39a886edf7b707
-size 166079
+oid sha256:f07f257a6bf04bdeffe42e9aed2bbfab4f4c0ddf6a751a71717d64bef16de10a
+size 147108
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-iPhone-16-pseudo.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-iPhone-16-pseudo.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c1b58b4bd0e6be9c5dc1f376a42d7f9861c818bfaaf450f100774b153792ef5
-size 169524
+oid sha256:9cde336b150823855a1a15025d49ff104b5032914f903232686775d2ead3f546
+size 150415
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-in-thread-iPad-en-GB.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-in-thread-iPad-en-GB.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:60ee0fbde39702fc1bcde221a50966a3445491ffa3055160ff505ec5ff8fb431
-size 221545
+oid sha256:22dbb41a0f6e95d3d50cdcee4e17ae3d8dfed2f8a8260ebc0242eb27825c32ff
+size 216722
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-in-thread-iPad-pseudo.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-in-thread-iPad-pseudo.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ba51135ec23639c9562e23f82982a188561e6b7d120fcc1203f63c9bca0f8142
-size 226992
+oid sha256:834db2da4915bb82598d0ecd17c22af8b3bbf19d1700620d56079671e5172c8b
+size 222709
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-in-thread-iPhone-16-en-GB.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-in-thread-iPhone-16-en-GB.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a4ed5a3519ee92a1e15c6c02e5ec62395a17e7273ba3cb43309b91a7b508b2cc
-size 157471
+oid sha256:dd4b4d06a72783f58ac61a75ab7c69050145881e79d5cefb2e67bf31b5951c0b
+size 153309
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-in-thread-iPhone-16-pseudo.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.Replying-in-thread-iPhone-16-pseudo.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b38762e772d86438d57de960276c82a4af1cb3a2ec96a2f5b56571f2b3b852c
-size 163399
+oid sha256:2cf1b8031bbf5e9c3a1f47eccf9354ecfc153a8b64471273ba3ceca4ad5e3eda
+size 159244
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.iPad-en-GB-0.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.iPad-en-GB-0.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:37e3e4f01b046dd46eb87c9558980c38e767748dbe0dfde4883e9ef84b674964
-size 160683
+oid sha256:98bf01c02b68e39569825ffa1d733734ff63a875ccfea6e57b4e0a28f28d030a
+size 152501
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.iPad-pseudo-0.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.iPad-pseudo-0.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e4742677a0b69d55250cc2789e60427a7050a49e34004dac78588f3d4b10b936
-size 165446
+oid sha256:7260f5478a223b856671f77307e0ff007807815973cc90121362f9d89f491ffe
+size 156788
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.iPhone-16-en-GB-0.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.iPhone-16-en-GB-0.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e68dfb15e0ceae9584386d9b2f35b231003ac282e153a0cd6ca61189d166c32b
-size 115467
+oid sha256:ecedd1e6746be3373c7159c161bbb414a8940a678dea408489e46b8963cc881f
+size 105148
--- a/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.iPhone-16-pseudo-0.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/messageComposer.iPhone-16-pseudo-0.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f493fba0ed037910b7ca1ad4cef13208f0ae8b6a3afc9631868324145509507
-size 121168
+oid sha256:d7b2f9403956597e7ca39c470c0e4c8a78c35cc77c20f49f963197aef6faa056
+size 111088
--- a/PreviewTests/Sources/Snapshots/PreviewTests/pillViewOnBubble.iPad-en-GB-0.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/pillViewOnBubble.iPad-en-GB-0.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3e4e91422c5ba164d8626d92deafa239aa3f60f8a0baa0fa4def8e85f4e017f8
-size 106413
+oid sha256:0eb2008947dc24eb324a564ec6a10ad7c05b2ef6786ee44c41994fcd3b0df313
+size 105817
--- a/PreviewTests/Sources/Snapshots/PreviewTests/pillViewOnBubble.iPad-pseudo-0.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/pillViewOnBubble.iPad-pseudo-0.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b5a8adc4006fa9f912585fb9e2f6ddffb84286caafdf0219ed38ed0616e408bb
-size 107630
+oid sha256:02bf2c8b74e2ece5060e8ae739b0f7affd3d52088cca82c46bd78caf828b1283
+size 107001
--- a/PreviewTests/Sources/Snapshots/PreviewTests/pillViewOnBubble.iPhone-16-en-GB-0.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/pillViewOnBubble.iPhone-16-en-GB-0.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9b15a6b50a475262088f88be389b8d48b73b90a51477c1a2c3a2bc1260192c28
-size 61346
+oid sha256:5ba720b62dc0c6f19740b19a28bb561b3e2f69afc4efa0f6599e2f11b1764282
+size 60921
--- a/PreviewTests/Sources/Snapshots/PreviewTests/pillViewOnBubble.iPhone-16-pseudo-0.png
+++ b/PreviewTests/Sources/Snapshots/PreviewTests/pillViewOnBubble.iPhone-16-pseudo-0.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:75f9d0013e51f156b9be19a148fd7a8aadf4ddbe9fe5012ea334f47d9482e4da
-size 64433
+oid sha256:ac40ae0936be66c9281951ad5f2266eab0e178a93c488dc3d5dc87b3318fe8e3
+size 64028