[Notifications P2] Comment Moderation View

Modules/Sources/DesignSystem/Foundation/IconName.swift

@@ -10,11 +10,15 @@ import SwiftUI
 public enum IconName: String, CaseIterable {
     case ellipsisHorizontal = "ellipsis.horizontal"
     case checkmark
+    case checkmarkCircle = "checkmark.circle"
+    case clock
+    case trash
     case gearshapeFill = "gearshape.fill"
     case blockShare = "block.share"
     case starFill = "star.fill"
     case starOutline = "star.outline"
     case chevronRight = "chevron.right"
+    case exclamationCircle = "exclamation.circle"
 }
 
 // MARK: - Load Image

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/checkmark.circle.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "check-circle.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/clock.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "clock.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/exclamation.circle.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "exclamation.circle.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/trash.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "delete_24px.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Classes/ViewRelated/Notifications/Comment Moderation/CommentModerationOptionsView.swift

@@ -0,0 +1,149 @@
+import SwiftUI
+import DesignSystem
+
+struct CommentModerationOptionsView: View {
+
+    private var options: [Option] = [
+        .approve,
+        .pending,
+        .trash,
+        .spam
+    ]
+
+    var optionSelected: ((Option) -> Void)?
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: .DS.Padding.medium) {
+            title
+            optionsVStack
+        }
+        .padding(.horizontal, .DS.Padding.double)
+        .background(Color.DS.Background.primary)
+    }
+
+    private var title: some View {
+        Text(Strings.title)
+            .font(.DS.Body.Emphasized.large)
+            .foregroundStyle(Color.DS.Foreground.primary)
+    }
+
+    private var optionsVStack: some View {
+        VStack(spacing: .DS.Padding.medium) {
+            ForEach(options, id: \.title) { option in
+                Button {
+                    optionSelected?(option)
+                } label: {
+                    optionHStack(option: option)
+                }
+            }
+        }
+    }
+
+    private func optionHStack(option: Option) -> some View {
+        HStack(spacing: .DS.Padding.double) {
+            Image.DS.icon(named: option.iconName)
+                .resizable()
+                .renderingMode(.template)
+                .foregroundStyle(option.tintColor)
+                .frame(
+                    width: .DS.Padding.medium,
+                    height: .DS.Padding.medium
+                )
+
+            Text(option.title)
+                .font(.DS.Body.large)
+                .foregroundStyle(
+                    Color.DS.Foreground.primary
+                )
+
+            Spacer()
+        }
+    }
+}
+
+extension CommentModerationOptionsView {
+    enum Strings {
+        static let title = NSLocalizedString(
+            "comment.moderation.sheet.title",
+            value: "Choose comment status",
+            comment: "Title for the comment moderation sheet."
+        )
+    }
+}
+
+extension CommentModerationOptionsView {
+    enum Option {
+        case approve
+        case pending
+        case trash
+        case spam
+
+        var title: String {
+            switch self {
+            case .approve:
+                return Strings.approveTitle
+            case .pending:
+                return Strings.pendingTitle
+            case .trash:
+                return Strings.trashTitle
+            case .spam:
+                return Strings.spamTitle
+            }
+        }
+
+        var iconName: IconName {
+            switch self {
+            case .approve:
+                return .checkmarkCircle
+            case .pending:
+                return .clock
+            case .trash:
+                return .trash
+            case .spam:
+                return .exclamationCircle
+            }
+        }
+
+        var tintColor: Color {
+            switch self {
+            case .approve:
+                return .DS.Foreground.brand(isJetpack: true)
+            case .pending:
+                return .DS.Foreground.secondary
+            case .trash:
+                return .DS.Foreground.warning
+            case .spam:
+                return .DS.Foreground.error
+            }
+        }
+    }
+}
+
+private extension CommentModerationOptionsView.Option {
+    enum Strings {
+        static let approveTitle = NSLocalizedString(
+            "comment.moderation.sheet.approve.title",
+            value: "Approve",
+            comment: "Approve option title for the comment moderation sheet."
+        )
+        static let pendingTitle = NSLocalizedString(
+            "comment.moderation.sheet.pending.title",
+            value: "Pending",
+            comment: "Pending option title for the comment moderation sheet."
+        )
+        static let trashTitle = NSLocalizedString(
+            "comment.moderation.sheet.trash.title",
+            value: "Trash",
+            comment: "Trash option title for the comment moderation sheet."
+        )
+        static let spamTitle = NSLocalizedString(
+            "comment.moderation.sheet.spam.title",
+            value: "Spam",
+            comment: "Spam option title for the comment moderation sheet."
+        )
+    }
+}
+
+#Preview {
+    CommentModerationOptionsView()
+}

WordPress/WordPress.xcodeproj/project.pbxproj

@@ -262,6 +262,7 @@
 		069A4AA72664448F00413FA9 /* GutenbergFeaturedImageHelper.swift in Sources */ = {isa = PBXBuildFile; fileRef = 069A4AA52664448F00413FA9 /* GutenbergFeaturedImageHelper.swift */; };
 		080C44A91CE14A9F00B3A02F /* MenuDetailsViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 080C449E1CE14A9F00B3A02F /* MenuDetailsViewController.m */; };
 		0815CF461E96F22600069916 /* MediaImportService.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0815CF451E96F22600069916 /* MediaImportService.swift */; };
+		08169B9D2BDA68F600055454 /* CommentModerationOptionsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 08169B9C2BDA68F600055454 /* CommentModerationOptionsView.swift */; };
 		081E4B4C281C019A0085E89C /* TooltipAnchor.swift in Sources */ = {isa = PBXBuildFile; fileRef = 081E4B4B281C019A0085E89C /* TooltipAnchor.swift */; };
 		08216FAA1CDBF95100304BA7 /* MenuItemEditing.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 08216FA71CDBF95100304BA7 /* MenuItemEditing.storyboard */; };
 		08216FAB1CDBF95100304BA7 /* MenuItemEditingViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 08216FA91CDBF95100304BA7 /* MenuItemEditingViewController.m */; };
@@ -6034,6 +6035,7 @@
 		080C449D1CE14A9F00B3A02F /* MenuDetailsViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = MenuDetailsViewController.h; sourceTree = "<group>"; };
 		080C449E1CE14A9F00B3A02F /* MenuDetailsViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = MenuDetailsViewController.m; sourceTree = "<group>"; };
 		0815CF451E96F22600069916 /* MediaImportService.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MediaImportService.swift; sourceTree = "<group>"; };
+		08169B9C2BDA68F600055454 /* CommentModerationOptionsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CommentModerationOptionsView.swift; sourceTree = "<group>"; };
 		081E4B4B281C019A0085E89C /* TooltipAnchor.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TooltipAnchor.swift; sourceTree = "<group>"; };
 		08216FA71CDBF95100304BA7 /* MenuItemEditing.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = MenuItemEditing.storyboard; sourceTree = "<group>"; };
 		08216FA81CDBF95100304BA7 /* MenuItemEditingViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = MenuItemEditingViewController.h; sourceTree = "<group>"; };
@@ -10173,6 +10175,14 @@
 			path = Classes;
 			sourceTree = "<group>";
 		};
+		08169B9B2BDA68E000055454 /* Comment Moderation */ = {
+			isa = PBXGroup;
+			children = (
+				08169B9C2BDA68F600055454 /* CommentModerationOptionsView.swift */,
+			);
+			path = "Comment Moderation";
+			sourceTree = "<group>";
+		};
 		081E4B4A281BFB520085E89C /* Feature Highlight */ = {
 			isa = PBXGroup;
 			children = (
@@ -16526,6 +16536,7 @@
 		CC1D800D1656D8B2002A542F /* Notifications */ = {
 			isa = PBXGroup;
 			children = (
+				08169B9B2BDA68E000055454 /* Comment Moderation */,
 				3FEC241325D73C53007AFE63 /* Milestone Notifications */,
 				402FFB1D218C2B8D00FF4A0B /* Style */,
 				B5FD453E199D0F2800286FBB /* Controllers */,
@@ -22445,6 +22456,7 @@
 				8B0CE7D12481CFE8004C4799 /* ReaderDetailHeaderView.swift in Sources */,
 				E240859C183D82AE002EB0EF /* WPAnimatedBox.m in Sources */,
 				4A1E77CC2989F2F7006281CC /* WPAccount+DeduplicateBlogs.swift in Sources */,
+				08169B9D2BDA68F600055454 /* CommentModerationOptionsView.swift in Sources */,
 				08472A201C727E020040769D /* PostServiceOptions.m in Sources */,
 				9A38DC6A218899FB006A409B /* DiffTitleValue.swift in Sources */,
 				B0AC50DD251E96270039E022 /* ReaderCommentsViewController.swift in Sources */,