Update message composer design for unencrypted rooms (#4361)

* Update message composer design for unencrypted rooms. * Move the encryption banner to the composer toolbar.
2026-11-03 06:55:59 +00:00 · 2025-07-28 19:21:13 +03:00
parent 64978986f2
commit 82c7dfe28d
20 changed files with 61 additions and 67 deletions
@@ -28,7 +28,7 @@ struct PillViewOnBubble_Previews: PreviewProvider, TestablePreview {
                mockMessage
                    .offset(y: -1)
                    .frame(maxWidth: .infinity, alignment: .leading)
-                    .messageComposerStyle(isEncrypted: false)
+                    .messageComposerStyle()
                SendButton { }
            }
@@ -69,7 +69,7 @@ struct MediaUploadPreviewScreen: View {
                    captionWarningButton
                }
            }
-            .messageComposerStyle(isEncrypted: context.viewState.isRoomEncrypted)
+            .messageComposerStyle()
            SendButton {
                context.send(viewAction: .send)
@@ -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 {
+            ZStack {
-                suggestionView
+                if verticalSizeClass != .compact, !context.composerExpanded {
-                    .offset(y: -frame.height)
+                    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,
+                        isExpanded: $context.composerExpanded) {
                        isEncrypted: context.viewState.isRoomEncrypted) {
            sendMessage()
        } editAction: {
            context.send(viewAction: .editLastMessage)
@@ -236,11 +250,7 @@ struct ComposerToolbar: View {
    }
    private var composerPlaceholder: String {
-        if context.viewState.isRoomEncrypted {
+        L10n.richTextEditorComposerPlaceholder
            return L10n.richTextEditorComposerPlaceholder
        } else {
            return L10n.richTextEditorComposerUnencryptedPlaceholder
        }
    }
    private var composerView: WysiwygComposerView {
@@ -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 {
+    func messageComposerStyle(header: some View = EmptyView()) -> some View {
-        modifier(MessageComposerStyleModifier(header: header, isEncrypted: isEncrypted))
+        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) {
+            content
-                icon
+                .tint(.compound.iconAccentTertiary)
-                    .scaledOffset(y: 2)
+                .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 },
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ff23bd65e045fb72987378893db31d89841f173c5d0ac544ec6e1dcb0b5715f6
+oid sha256:d0e002656c52a775cc5b576fb71e70c032f132072ce4e9886f96cb82143a3bb3
-size 230776
+size 209527
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ee42180ee15f701ee7c9510d9169d331f9bdc0d4936867480876e1c1c752e1cd
+oid sha256:da5f066472285215d2ce3feb1e47e66437569f960eff9fa403653e4c806a296a
-size 235581
+size 212824
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:10b24075681300a6e127b3e8dcdf065234f4f1946d40e1425e39a886edf7b707
+oid sha256:f07f257a6bf04bdeffe42e9aed2bbfab4f4c0ddf6a751a71717d64bef16de10a
-size 166079
+size 147108
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c1b58b4bd0e6be9c5dc1f376a42d7f9861c818bfaaf450f100774b153792ef5
+oid sha256:9cde336b150823855a1a15025d49ff104b5032914f903232686775d2ead3f546
-size 169524
+size 150415
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:60ee0fbde39702fc1bcde221a50966a3445491ffa3055160ff505ec5ff8fb431
+oid sha256:22dbb41a0f6e95d3d50cdcee4e17ae3d8dfed2f8a8260ebc0242eb27825c32ff
-size 221545
+size 216722
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ba51135ec23639c9562e23f82982a188561e6b7d120fcc1203f63c9bca0f8142
+oid sha256:834db2da4915bb82598d0ecd17c22af8b3bbf19d1700620d56079671e5172c8b
-size 226992
+size 222709
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a4ed5a3519ee92a1e15c6c02e5ec62395a17e7273ba3cb43309b91a7b508b2cc
+oid sha256:dd4b4d06a72783f58ac61a75ab7c69050145881e79d5cefb2e67bf31b5951c0b
-size 157471
+size 153309
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b38762e772d86438d57de960276c82a4af1cb3a2ec96a2f5b56571f2b3b852c
+oid sha256:2cf1b8031bbf5e9c3a1f47eccf9354ecfc153a8b64471273ba3ceca4ad5e3eda
-size 163399
+size 159244
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:37e3e4f01b046dd46eb87c9558980c38e767748dbe0dfde4883e9ef84b674964
+oid sha256:98bf01c02b68e39569825ffa1d733734ff63a875ccfea6e57b4e0a28f28d030a
-size 160683
+size 152501
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e4742677a0b69d55250cc2789e60427a7050a49e34004dac78588f3d4b10b936
+oid sha256:7260f5478a223b856671f77307e0ff007807815973cc90121362f9d89f491ffe
-size 165446
+size 156788
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e68dfb15e0ceae9584386d9b2f35b231003ac282e153a0cd6ca61189d166c32b
+oid sha256:ecedd1e6746be3373c7159c161bbb414a8940a678dea408489e46b8963cc881f
-size 115467
+size 105148
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f493fba0ed037910b7ca1ad4cef13208f0ae8b6a3afc9631868324145509507
+oid sha256:d7b2f9403956597e7ca39c470c0e4c8a78c35cc77c20f49f963197aef6faa056
-size 121168
+size 111088
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3e4e91422c5ba164d8626d92deafa239aa3f60f8a0baa0fa4def8e85f4e017f8
+oid sha256:0eb2008947dc24eb324a564ec6a10ad7c05b2ef6786ee44c41994fcd3b0df313
-size 106413
+size 105817
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b5a8adc4006fa9f912585fb9e2f6ddffb84286caafdf0219ed38ed0616e408bb
+oid sha256:02bf2c8b74e2ece5060e8ae739b0f7affd3d52088cca82c46bd78caf828b1283
-size 107630
+size 107001
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9b15a6b50a475262088f88be389b8d48b73b90a51477c1a2c3a2bc1260192c28
+oid sha256:5ba720b62dc0c6f19740b19a28bb561b3e2f69afc4efa0f6599e2f11b1764282
-size 61346
+size 60921
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:75f9d0013e51f156b9be19a148fd7a8aadf4ddbe9fe5012ea334f47d9482e4da
+oid sha256:ac40ae0936be66c9281951ad5f2266eab0e178a93c488dc3d5dc87b3318fe8e3
-size 64433
+size 64028