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>

AccessibilityTests/Sources/GeneratedAccessibilityTests.swift

@@ -583,6 +583,10 @@ extension AccessibilityTests {
         try await performAccessibilityAudit(named: "SoftLogoutScreen_Previews")
     }
 
+    func testSpaceHeaderTopicSheetView() async throws {
+        try await performAccessibilityAudit(named: "SpaceHeaderTopicSheetView_Previews")
+    }
+
     func testSpaceHeaderView() async throws {
         try await performAccessibilityAudit(named: "SpaceHeaderView_Previews")
     }

ElementX.xcodeproj/project.pbxproj

@@ -1046,6 +1046,7 @@
 		BE8E5985771DF9137C6CE89A /* ProcessInfo.swift in Sources */ = {isa = PBXBuildFile; fileRef = 077B01C13BBA2996272C5FB5 /* ProcessInfo.swift */; };
 		BEC6DFEA506085D3027E353C /* MediaEventsTimelineScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 002399C6CB875C4EBB01CBC0 /* MediaEventsTimelineScreen.swift */; };
 		BED59052E5C5163D2B065CA6 /* EventTimelineItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0A81FD0C60175FA081EB19AD /* EventTimelineItem.swift */; };
+		BF523D9E12E3C4AABBA2F6CB /* SpaceHeaderTopicSheetView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1D9F2E1FC5A0139571211CE8 /* SpaceHeaderTopicSheetView.swift */; };
 		BFEB24336DFD5F196E6F3456 /* IntentionalMentions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DF5CBAF69BDF5DF31C661E1 /* IntentionalMentions.swift */; };
 		C0090506A52A1991BAF4BA68 /* NotificationSettingsChatType.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07579F9C29001E40715F3014 /* NotificationSettingsChatType.swift */; };
 		C022284E2774A5E1EF683B4D /* FileManager.swift in Sources */ = {isa = PBXBuildFile; fileRef = 04DF593C3F7AF4B2FBAEB05D /* FileManager.swift */; };
@@ -1635,6 +1636,7 @@
 		1D70253004A5AEC9C73D6A4F /* ComposerDraftService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ComposerDraftService.swift; sourceTree = "<group>"; };
 		1D8C38663020DF2EB2D13F5E /* AppLockSetupSettingsScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppLockSetupSettingsScreenViewModel.swift; sourceTree = "<group>"; };
 		1D9F148717D74F73BE724434 /* LongPressWithFeedback.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LongPressWithFeedback.swift; sourceTree = "<group>"; };
+		1D9F2E1FC5A0139571211CE8 /* SpaceHeaderTopicSheetView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SpaceHeaderTopicSheetView.swift; sourceTree = "<group>"; };
 		1DA7E93C2E148B96EF6A8500 /* TimelineItemAccessibilityModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimelineItemAccessibilityModifier.swift; sourceTree = "<group>"; };
 		1DB2FC2AA9A07EE792DF65CF /* NotificationPermissionsScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationPermissionsScreenModels.swift; sourceTree = "<group>"; };
 		1DD2A058F3566FEEBA1D11B3 /* RoomSelectionScreenViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomSelectionScreenViewModelProtocol.swift; sourceTree = "<group>"; };
@@ -5628,6 +5630,7 @@
 		BDDD421CD80AD0BCBA035076 /* Common */ = {
 			isa = PBXGroup;
 			children = (
+				1D9F2E1FC5A0139571211CE8 /* SpaceHeaderTopicSheetView.swift */,
 				F3AAC314A877DBDB6EBE1170 /* SpaceHeaderView.swift */,
 				A0E7B059E84E7E374D3322A2 /* SpaceRoomCell.swift */,
 			);
@@ -8162,6 +8165,7 @@
 				CF4044A8EED5C41BC0ED6ABE /* SoftLogoutScreenViewModelProtocol.swift in Sources */,
 				8D9A97E32C6C03B884CBD85A /* SpaceExplorerFlowCoordinator.swift in Sources */,
 				C8E11A335456FCF94A744E6E /* SpaceFlowCoordinator.swift in Sources */,
+				BF523D9E12E3C4AABBA2F6CB /* SpaceHeaderTopicSheetView.swift in Sources */,
 				E9B4742B3D6E103327466513 /* SpaceHeaderView.swift in Sources */,
 				306ADA9D91EE5F0A30B5E500 /* SpaceListScreen.swift in Sources */,
 				C586E1B286BCD8A774DA16B8 /* SpaceListScreenCoordinator.swift in Sources */,

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,6 +37,7 @@ struct SpaceHeaderView: View {
             }
             
             if let topic = spaceRoomProxy.topic {
+                Button { isPresentingTopic = true } label: {
                     Text(topic)
                         .font(.compound.bodyMD)
                         .foregroundStyle(.compound.textPrimary)
@@ -42,6 +45,7 @@ struct SpaceHeaderView: View {
                         .lineLimit(2)
                 }
             }
+        }
         .fixedSize(horizontal: false, vertical: true)
         .frame(maxWidth: .infinity)
         .padding(.horizontal, 16)
@@ -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 {

PreviewTests/Sources/GeneratedPreviewTests.swift

@@ -875,6 +875,12 @@ extension PreviewTests {
         }
     }
 
+    func testSpaceHeaderTopicSheetView() async throws {
+        for (index, preview) in SpaceHeaderTopicSheetView_Previews._allPreviews.enumerated() {
+            try await assertSnapshots(matching: preview, step: index)
+        }
+    }
+
     func testSpaceHeaderView() async throws {
         for (index, preview) in SpaceHeaderView_Previews._allPreviews.enumerated() {
             try await assertSnapshots(matching: preview, step: index)