Plain timeline styler (#94)

* #92 Create `TimelineStyle` and store it in user defaults

* #92 Create `TimelineStyler` observable environment object

* #92 Use timeline list row insets from the styler

* #92 remove sender view, move header into the styler views

* #92 Add timeline style option in settings

* #92 Add changelog

* #92 refactor some code duplications

* #92 Fix `TimelineStyle`targets

* #92 Fix `TimelineStyle` targets

* #92 Fix PR remarks

* #92 Fix inline PR comments

* #92 Fix UI tests

* #92 Rename bubbled to bubbles

ElementX/Sources/Screens/Settings/View/Settings.swift

@@ -22,6 +22,7 @@ struct Settings: View {
 
     @State private var showingLogoutConfirmation = false
     @Environment(\.colorScheme) private var colorScheme
+    @ObservedObject private var settings = ElementSettings.shared
     
     // MARK: Public
     
@@ -48,6 +49,8 @@ struct Settings: View {
             }
             .listRowBackground(rowBackgroundColor)
 
+            userInterfaceSection
+
             Section {
                 Button { showingLogoutConfirmation = true } label: {
                     Text(ElementL10n.actionSignOut)
@@ -74,7 +77,7 @@ struct Settings: View {
         .background(backgroundColor, ignoresSafeAreaEdges: .all)
     }
 
-    var versionText: some View {
+    private var versionText: some View {
         Text(ElementL10n.settingsVersion + ": " + ElementInfoPlist.cfBundleShortVersionString + " (" + ElementInfoPlist.cfBundleVersion + ")")
     }
 
@@ -85,6 +88,33 @@ struct Settings: View {
     private var rowBackgroundColor: Color {
         colorScheme == .light ? .element.background : .element.system
     }
+
+    @ViewBuilder
+    private var userInterfaceSection: some View {
+        if BuildSettings.settingsShowTimelineStyle {
+            Section(header: Text(ElementL10n.settingsUserInterface)) {
+                Picker(ElementL10n.settingsTimelineStyle, selection: $settings.timelineStyle) {
+                    ForEach(TimelineStyle.allCases, id: \.self) { style in
+                        Text(style.description)
+                            .tag(style)
+                    }
+                }
+                .accessibilityIdentifier("timelineStylePicker")
+            }
+            .listRowBackground(rowBackgroundColor)
+        }
+    }
+}
+
+extension TimelineStyle: CustomStringConvertible {
+    var description: String {
+        switch self {
+        case .plain:
+            return ElementL10n.roomTimelineStylePlainLongDescription
+        case .bubbles:
+            return ElementL10n.roomTimelineStyleBubbledLongDescription
+        }
+    }
 }
 
 // MARK: - Previews