[Notifications P2] Commen Moderation: Pending

[alpavanoglu]

Fixes #https://github.com/Automattic/wordpress-mobile/issues/33

Description

This PR adds the new Moderation View UI to the Comment Detail Screen. The functionality will follow with other PRs.

Acceptance Criteria

If the comment has the "Pending" moderation status, a moderation panel is displayed at the bottom of the comment details screen. There is a separator between the content and the panel. 1‍⃣ There is a label indicating the moderation state with a dedicated icon. 2‍⃣ Approve comment CTA button with an icon is visible but not actionable. 3‍⃣ More options CTA button opens a bottom sheet dialog containing all the available moderation options. 4‍⃣ The bottom sheet dialog presents "Approved," "Pending," "Thrash," and "Spam" options that are not actionable.

Testing Steps

1. Install and Login on Jetpack App
2. Go to Notifications
3. Select a comment notification that has "pending" state (the moderation can be set from web if no comment is in pending state.
4. ✅ Expect the new moderation component to appear instead of the old one.
5. ✅ Verify if tapping on "More options" show the moderation options sheet.

Test in dark and light mode and with different dynamic font sizes.

Screenshot Reference

Header	Header

Regression Notes

1. Potential unintended areas of impact

2. What I did to test those areas of impact (or what existing automated tests I relied on)

3. What automated tests I added (or what prevented me from doing so)

PR submission checklist:

• [x] I have completed the Regression Notes.
• [x] I have considered adding unit tests for my changes.
• [x] I have considered adding accessibility improvements for my changes.
• [x] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing checklist:

• [ ] WordPress.com sites and self-hosted Jetpack sites.
• [ ] Portrait and landscape orientations.
• [ ] Light and dark modes.
• [ ] Fonts: Larger, smaller and bold text.
• [ ] High contrast.
• [ ] VoiceOver.
• [ ] Languages with large words or with letters/accents not frequently used in English.
• [ ] Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• [ ] iPhone and iPad.
• [ ] Multi-tasking: Split view and Slide over. (iPad)

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr23134-e0cec11
	Version	24.8
	Bundle ID	org.wordpress.alpha
	Commit	e0cec11c9d15ebbe78099513362375e8242e1081
	App Center Build	WPiOS - One-Offs #9873

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr23134-e0cec11
	Version	24.8
	Bundle ID	com.jetpack.alpha
	Commit	e0cec11c9d15ebbe78099513362375e8242e1081
	App Center Build	jetpack-installable-builds #8921

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.