Reader: Show empty state for individual rows

[dvdchr]

Part of #23069

As titled, this shows an empty state cell when there are no posts under a tag. For cases with no internet connection, after loading fails, the collection view will still display cached posts (if it exists) before displaying the empty state cell. Some more technical changes:

• Added Section and CardCellItem in ReaderTagCardCell to encapsulate the section & item identifier of the diffable data source. Since the generic type now differs from the one returned from NSFetchedResultsController, I've added a method to translate them to the correct structure.
• Added ReaderTagCardEmptyCell for the empty state cell. This cell's width is set to the collection view's width.
• Added AdaptiveCollectionViewFlowLayout so that the collection view properly resizes on orientation change.
• In the ReaderTagCardCell.xib, I've removed the 8pt leading constraint since it made the empty cell look skewed/not centered. I can revert this if this value was intended.

Here's a preview:

Light	Dark

To test

Since the collection view will still display the list if there are cached items, you can modify this line (ReaderTagCardCellViewModel.swift:L171) to ensure that the empty state cell will always be shown:

    let isEmpty = true // coreDataSnapshot.numberOfItems == .zero

• Launch the Jetpack app.
• Go to the Reader tab and switch to the tags stream.
• 🔎 Verify that the empty state cell is displayed correctly.
• Tap the 'Retry' button.
• 🔎 Verify that the cell shows the loading state, and then dismisses it after the request completes.
• Rotate the device.
• 🔎 Verify that the collection view resizes correctly.

Regression Notes

1. Potential unintended areas of impact
   Should be none. Component is isolated and hidden behind a feature flag.

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

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

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.

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	pr23144-e91bbb7
	Version	24.8
	Bundle ID	org.wordpress.alpha
	Commit	e91bbb7
	App Center Build	WPiOS - One-Offs #9772

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	pr23144-e91bbb7
	Version	24.8
	Bundle ID	com.jetpack.alpha
	Commit	e91bbb7
	App Center Build	jetpack-installable-builds #8818

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

[wargcm]

LGTM!

[sentry-io]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ NSInternalInconsistencyException: attempt to insert item 6 into section 0, but there are only 6 items in section 0 after the update ReaderTagCardCellViewModel.controller View Issue

_{Did you find this useful? React with a 👍 or 👎}