Add the sheet for expanding the space description. (#4475)

* Start working on space description

* Hook up presentation of the SpaceScreenDescriptionView.

* Make the SpaceScreenDescriptionView more accessible and apply a background colour.

* Refactor and move sheet presentation to the header view.

---------

Co-authored-by: amshak <85162587+amshakal@users.noreply.github.com>

ElementX/Sources/Other/TestablePreview/TestablePreviewsDictionary.swift

@@ -153,6 +153,7 @@ enum TestablePreviewsDictionary {
         "SettingsScreen_Previews" : SettingsScreen_Previews.self,
         "ShimmerOverlay_Previews" : ShimmerOverlay_Previews.self,
         "SoftLogoutScreen_Previews" : SoftLogoutScreen_Previews.self,
+        "SpaceHeaderTopicSheetView_Previews" : SpaceHeaderTopicSheetView_Previews.self,
         "SpaceHeaderView_Previews" : SpaceHeaderView_Previews.self,
         "SpaceListScreen_Previews" : SpaceListScreen_Previews.self,
         "SpaceRoomCell_Previews" : SpaceRoomCell_Previews.self,

ElementX/Sources/Screens/Spaces/Common/SpaceHeaderTopicSheetView.swift

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct SpaceHeaderTopicSheetView: View {
+    let topic: String
+    
+    @State private var sheetHeight: CGFloat = .zero
+    private let topPadding: CGFloat = 19
+    
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 10) {
+                Text(L10n.commonDescription)
+                    .font(.compound.bodySM)
+                    .foregroundStyle(.compound.textSecondary)
+                    .textCase(.uppercase)
+                Text(topic)
+                    .font(.compound.bodyMD)
+                    .foregroundStyle(.compound.textPrimary)
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(16)
+            .readHeight($sheetHeight)
+        }
+        .scrollBounceBehavior(.basedOnSize)
+        .padding(.top, topPadding) // For the drag indicator
+        .presentationDetents([.height(sheetHeight + topPadding)])
+        .presentationDragIndicator(.visible)
+        .presentationBackground(.compound.bgCanvasDefault)
+    }
+}
+
+// MARK: - Previews
+
+struct SpaceHeaderTopicSheetView_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        SpaceHeaderTopicSheetView(topic: ["Description of the space goes right here.",
+                                          "Lorem ipsum dolor sit amet consectetur.",
+                                          "Leo viverra morbi habitant in.",
+                                          "Sem amet enim habitant nibh augue mauris.",
+                                          "Interdum mauris ultrices tincidunt proin morbi erat aenean risus nibh.",
+                                          "Diam amet sit fermentum vulputate faucibus."].joined(separator: " "))
+    }
+}

ElementX/Sources/Screens/Spaces/Common/SpaceHeaderView.swift

@@ -12,6 +12,8 @@ struct SpaceHeaderView: View {
     let spaceRoomProxy: SpaceRoomProxyProtocol
     let mediaProvider: MediaProviderProtocol?
     
+    @State private var isPresentingTopic = false
+    
     var title: String { spaceRoomProxy.name ?? "" }
     
     var body: some View {
@@ -35,11 +37,13 @@ struct SpaceHeaderView: View {
             }
             
             if let topic = spaceRoomProxy.topic {
-                Text(topic)
-                    .font(.compound.bodyMD)
-                    .foregroundStyle(.compound.textPrimary)
-                    .multilineTextAlignment(.center)
-                    .lineLimit(2)
+                Button { isPresentingTopic = true } label: {
+                    Text(topic)
+                        .font(.compound.bodyMD)
+                        .foregroundStyle(.compound.textPrimary)
+                        .multilineTextAlignment(.center)
+                        .lineLimit(2)
+                }
             }
         }
         .fixedSize(horizontal: false, vertical: true)
@@ -52,6 +56,11 @@ struct SpaceHeaderView: View {
                 .fill(Color.compound.borderDisabled)
                 .frame(height: 1 / UIScreen.main.scale)
         }
+        .sheet(isPresented: $isPresentingTopic) {
+            if let topic = spaceRoomProxy.topic {
+                SpaceHeaderTopicSheetView(topic: topic)
+            }
+        }
     }
     
     var spaceDetails: some View {