Site Domains: Modernize UI 1/2

[staskus]

Partially implements #22262
Figma rvVgXupiyONUcJMgPSoMFj-fi-3518_13838

Modernize Site Domains UI and re-use elements from All Domains.

Second PR: #22311, I think it's the best to test on second PR

Issue

All Domains uses /all-domains/ endpoint while Site Domains uses sites/%d/domains endpoint which produces a bit different data:

• Most notably, sites/%d/domains does not include status (Active/Verifying/Expired..) which is shown on All Domains view. Determining status involves quite a lot of logic (fbhepr%2Skers%2Sjcpbz%2Sjc%2Qpbagrag%2Syvo%2Sqbznvaf%2Sqbznva%2Qfgnghf%2Qerfbyire%2Sqbznva%2Qfgnghf%2Qerfbyire.cuc%3Se%3Qsn1n97n3%23ertvfgrerq_qbznva_fgnghf-og) therefore we cannot and shouldn't do it on the frontend site.
• All Domains entities include site_slug which is needed to open domain management.

I decided to only focus on UI updates in the scope of this PR, which means that I'm not including the endpoint changes to include "Status" and opening of domain management. I will do it in another PR (#22311).

Solution

1. Create SiteDomainsViewModel and move data loading logic there
2. Build free domain, and other domain sections, reusing AllDomainsListCardView.ViewModel
3. Create PrimaryDomainView badge
4. Update SiteDomainsView to use a new ViewMode and reuse AllDomainsListCardView
5. To have consistent spacing between cards I created rows that look like InsetGroupStyle instead of using this style directly, since spacing is only supported from iOS17

Simulator.Screen.Recording.-.iPhone.15.-.2023-12-27.at.10.04.58.mp4

To test:

Can be tested together with #22311

1. Check Menu -> Domains UI:

• With an account that has a domain (domains)
• With an account that only has a free domain

2. Confirm UI updates after purchasing the domain
3. Confirm UI appears correctly in dark mode
4. Confirm UI appears correctly with increased font sizes
5. Confirm UI appears correctly in a horizontal mode

Regression Notes

1. Potential unintended areas of impact

Breaking existing SiteDomains behavior

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

Manual testing

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

PR submission checklist:

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

UI Changes testing checklist:

• 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)

[staskus]

There are issues with spacing between cards on <iOS 16, since it doesn't yet support listSectionSpacing(spacing). Looks to be frustratingly hard to achieve consistent spacing without it.

[staskus]

❌ /usr/local/var/buildkite-agent/builds/MV-MKE-X64-015/automattic/wordpress-ios/WordPress/Classes/ViewRelated/Domains/Views/SiteDomainsView.swift:33:10: value of type 'some View' has no member 'listRowSpacing

CI fails with this spacing method as well. Requires Xcode 15.

I will comment this line out for now, we can re-enable it when we update to Xcode 15. The view looks different only in the case when we have more than one domain which is a rarer case. Trying to hack SwiftUI views is not worth it.

With spacing	Without spacing (Until we update to Xcode 15)

[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	pr22294-da9b6bc
	Version	23.9
	Bundle ID	org.wordpress.alpha
	Commit	da9b6bc
	App Center Build	WPiOS - One-Offs #8322

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	pr22294-da9b6bc
	Version	23.9
	Bundle ID	com.jetpack.alpha
	Commit	da9b6bc
	App Center Build	jetpack-installable-builds #7346

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

[guarani]

Tested via #22311 (review) 👍

[peril-wordpress-mobile]

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone
⚠️	PR has more than 500 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

[wpmobilebot]

	2 Warnings
⚠️	This PR is larger than 500 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️	This PR is assigned to the milestone 24.0. This milestone is due in less than 4 days. Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger