Further design updates to the timeline. (#524)

- Decryption banner on the timeline
- Bubble colours
- Background insets
- Multiline composer corner radius
- Read marker
- GIF indicator
- Reactions shape
- Use RoomTimelineViewLabelStyle everywhere possible
- Only set a line limit on reply quotes, allow all the lines for regular quotes.
- Message label icons
- Yes/No button casing
- Make sender profiles immutable.
- Enable copy link and invite buttons.
- Fix layout loop detecting multiline composer text.
- Add animation to the encryption banner.

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -23,8 +23,10 @@ struct RoomScreen: View {
     
     var body: some View {
         timeline
-            .background(Color.element.background) // Kills the toolbar translucency.
-            .safeAreaInset(edge: .bottom) { messageComposer }
+            .background(Color.element.background.ignoresSafeArea()) // Kills the toolbar translucency.
+            .overlay(alignment: .top) { encryptionBanner } // Overlay for now, safeAreaInset breaks timeline scroll offset.
+            .animation(.spring(), value: context.viewState.showEncryptionBanner)
+            .safeAreaInset(edge: .bottom, spacing: 0) { messageComposer }
             .navigationBarTitleDisplayMode(.inline)
             .toolbar { toolbar }
             .toolbarRole(.editor) // Hide the back button title.
@@ -49,6 +51,44 @@ struct RoomScreen: View {
             .overlay(alignment: .bottomTrailing) { scrollToBottomButton }
     }
     
+    @ViewBuilder
+    var encryptionBanner: some View {
+        if context.viewState.showEncryptionBanner {
+            VStack(alignment: .leading, spacing: 4) {
+                Label {
+                    Text("Unable to decrypt all messages")
+                        .foregroundColor(.element.primaryContent)
+                } icon: {
+                    Image(systemName: "lock.shield")
+                        .foregroundColor(.element.background)
+                        .padding(4)
+                        .background(Color.element.tertiaryContent)
+                        .cornerRadius(5)
+                }
+                .font(.element.bodyBold)
+                
+                Text("Accessing your encrypted message history is not fully supported yet.")
+                    .font(.element.subheadline)
+                    .foregroundColor(.element.secondaryContent)
+                    .padding(.bottom, 8)
+                
+                Button(ElementL10n.globalRetry) {
+                    context.send(viewAction: .retryDecryption)
+                }
+                .buttonStyle(.elementCapsuleProminent)
+            }
+            .padding(.horizontal, 16)
+            .padding(.vertical, 12)
+            .background {
+                RoundedRectangle(cornerRadius: 8)
+                    .fill(Color.element.system)
+            }
+            .padding([.horizontal, .top], 16)
+            .background(Color.element.background)
+            .transition(.move(edge: .top).combined(with: .opacity))
+        }
+    }
+    
     var messageComposer: some View {
         MessageComposer(text: $context.composerText,
                         focused: $context.composerFocused,
@@ -110,7 +150,8 @@ struct RoomScreen_Previews: PreviewProvider {
                                             roomName: "Preview room")
         
         NavigationView {
-            RoomScreen(context: viewModel.context)
+            RoomScreen(context: viewModel.context).encryptionBanner
+                .padding()
         }
     }
 }