Fixes #271 - Allow bubbles to horizontally fill the available space (#290)

* Fixes #271 - Allow bubbles to horizontally fill the available space
* Set the existing timelineItems on the timeline when appearing. This fixes UI tests in which items exists without the need for backpagination. It also presumably will fix the timeline when having cached data.

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

@@ -24,10 +24,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
     @ViewBuilder let content: () -> Content
 
     @Environment(\.colorScheme) private var colorScheme
-    @Environment(\.timelineWidth) private var timelineWidth
     @ScaledMetric private var senderNameVerticalPadding = 3
-    private let bubbleWidthPercentIncoming = 0.72 // 281/390
-    private let bubbleWidthPercentOutgoing = 0.68 // 267/390
 
     var body: some View {
         VStack(alignment: alignment, spacing: -12) {
@@ -84,7 +81,6 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                                       alignment: .leading) { key in
                     context.send(viewAction: .sendReaction(key: key, eventID: timelineItem.id))
                 }
-                .frame(width: bubbleWidth - 24)
                 .padding(.horizontal, 12)
             }
         }
@@ -105,13 +101,11 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
         
         if shouldAvoidBubbling {
             content()
-                .frame(width: bubbleWidth)
                 .cornerRadius(12, inGroupState: timelineItem.inGroupState)
                 .padding(.top, topPadding)
         } else {
             VStack(alignment: .trailing, spacing: 4) {
                 content()
-                    .frame(width: bubbleWidth - 24, alignment: .leading)
 
                 if timelineItem.properties.isEdited {
                     Text(ElementL10n.editedSuffix)
@@ -130,12 +124,10 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
     var styledContentIncoming: some View {
         if shouldAvoidBubbling {
             content()
-                .frame(width: bubbleWidth)
                 .cornerRadius(12, inGroupState: timelineItem.inGroupState)
         } else {
             VStack(alignment: .trailing, spacing: 4) {
                 content()
-                    .frame(width: bubbleWidth - 24, alignment: .leading)
 
                 if timelineItem.properties.isEdited {
                     Text(ElementL10n.editedSuffix)
@@ -145,11 +137,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
             }
             .padding(EdgeInsets(top: 6, leading: 12, bottom: 6, trailing: 12))
             .background(Color.element.systemGray6) // Demo time!
-            .cornerRadius(12, inGroupState: timelineItem.inGroupState) // Demo time!
+            .cornerRadius(12, inGroupState: timelineItem.inGroupState)
-//            .overlay(
-//                RoundedCornerShape(radius: 18, inGroupState: timelineItem.inGroupState)
-//                    .stroke(Color.element.systemGray5)
-//            )
         }
     }
 
@@ -160,10 +148,6 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
     private var alignment: HorizontalAlignment {
         timelineItem.isOutgoing ? .trailing : .leading
     }
-
-    private var bubbleWidth: CGFloat {
-        timelineWidth * (timelineItem.isOutgoing ? bubbleWidthPercentOutgoing : bubbleWidthPercentIncoming)
-    }
 }
 
 struct TimelineItemBubbledStylerView_Previews: PreviewProvider {
@@ -181,7 +165,6 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider {
             }
         }
         .timelineStyle(.bubbles)
-        .timelineWidth(390)
         .padding(.horizontal, 8)
         .previewLayout(.sizeThatFits)
     }

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

@@ -50,22 +50,3 @@ extension View {
         environment(\.timelineStyle, style)
     }
 }
-
-// MARK: - Timeline Width
-
-private struct TimelineWidthKey: EnvironmentKey {
-    static let defaultValue: CGFloat = 0
-}
-
-extension EnvironmentValues {
-    var timelineWidth: CGFloat {
-        get { self[TimelineWidthKey.self] }
-        set { self[TimelineWidthKey.self] = newValue }
-    }
-}
-
-extension View {
-    func timelineWidth(_ width: CGFloat) -> some View {
-        environment(\.timelineWidth, width)
-    }
-}

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

@@ -56,7 +56,6 @@ struct EmoteRoomTimelineView_Previews: PreviewProvider {
                                                          timestamp: "Later",
                                                          senderId: "Anne"))
         }
-        .environment(\.timelineWidth, 400)
     }
     
     private static func itemWith(text: String, timestamp: String, senderId: String) -> EmoteRoomTimelineItem {

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

@@ -92,6 +92,5 @@ struct ImageRoomTimelineView_Previews: PreviewProvider {
                                                                       aspectRatio: 0.7,
                                                                       blurhash: "L%KUc%kqS$RP?Ks,WEf8OlrqaekW"))
         }
-        .environment(\.timelineWidth, 400)
     }
 }

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

@@ -56,7 +56,6 @@ struct NoticeRoomTimelineView_Previews: PreviewProvider {
                                                           timestamp: "Later",
                                                           senderId: "Anne"))
         }
-        .environment(\.timelineWidth, 400)
     }
     
     private static func itemWith(text: String, timestamp: String, senderId: String) -> NoticeRoomTimelineItem {

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

@@ -44,7 +44,6 @@ struct RedactedRoomTimelineView_Previews: PreviewProvider {
                                                             timestamp: "Later",
                                                             senderId: "Anne"))
         }
-        .environment(\.timelineWidth, 400)
     }
     
     private static func itemWith(text: String, timestamp: String, senderId: String) -> RedactedRoomTimelineItem {

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

@@ -65,7 +65,6 @@ struct TextRoomTimelineView_Previews: PreviewProvider {
                                                         isOutgoing: true,
                                                         senderId: "Anne"))
         }
-        .environment(\.timelineWidth, 400)
     }
     
     private static func itemWith(text: String, timestamp: String, isOutgoing: Bool, senderId: String) -> TextRoomTimelineItem {

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

@@ -97,9 +97,9 @@ struct TimelineItemList: View {
         }
         .scrollDismissesKeyboard(.immediately)
         .background(ViewFrameReader(frame: $viewFrame))
-        .environment(\.timelineWidth, viewFrame.width)
         .timelineStyle(settings.timelineStyle)
         .onAppear {
+            timelineItems = context.viewState.items
             requestBackPagination()
         }
         // Allow SwiftUI to layout the views properly before checking if the top is visible