[Reader] Implement tags feed UI

[RenanLukas]

Fixes #20623

Light theme

Screen.Recording.2024-04-19.at.9.09.17.PM.mov

Dark theme

Screen.Recording.2024-04-19.at.9.09.45.PM.mov

---

To Test:

The UI component is not being used yet, so in order to test it you can run ReaderTagsFeedLoaded and ReaderTagsFeedLoading previews and compare them with Figma specs.

---

Regression Notes

1. Potential unintended areas of impact

   • None

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 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 (strike-out the not-applying and unnecessary ones):

• WordPress.com sites and self-hosted Jetpack sites.
• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• Talkback.
• 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)
• Large and small screen sizes. (Tablet and smaller phones)
• Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

[dangermattic]

	5 Warnings
⚠️	strings.xml files should only be updated on release branches, when the translations are downloaded by our automation.
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️	Class UiState is missing tests, but unit-tests-exemption label was set to ignore this.
⚠️	Class Loaded is missing tests, but unit-tests-exemption label was set to ignore this.
⚠️	Class TagsFeedPostItem is missing tests, but unit-tests-exemption label was set to ignore this.

Generated by 🚫 Danger

[wpmobilebot]

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

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr20686-1bab9d1
	Commit	1bab9d1
	Direct Download	wordpress-prototype-build-pr20686-1bab9d1.apk

Note: Google Login is not supported on these builds.

[wpmobilebot]

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

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr20686-1bab9d1
	Commit	1bab9d1
	Direct Download	jetpack-prototype-build-pr20686-1bab9d1.apk

Note: Google Login is not supported on these builds.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 40.33%. Comparing base (c54757c) to head (1bab9d1).
Report is 7 commits behind head on feature/tags-ia.

Additional details and impacted files

@@                 Coverage Diff                 @@
##           feature/tags-ia   #20686      +/-   ##
===================================================
+ Coverage            40.15%   40.33%   +0.17%     
===================================================
  Files                 1465     1474       +9     
  Lines                67522    67878     +356     
  Branches             11183    11225      +42     
===================================================
+ Hits                 27114    27377     +263     
- Misses               37959    38034      +75     
- Partials              2449     2467      +18     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[daniloercoli]

This error message is too generic, as it combines "no posts found in tag" (which is a valid condition) with a generic error. Can we make it clearer whether it's a real error or simply no posts found?

[RenanLukas]

Makes sense. There is at least one more scenario: when there was an error with the request. Should we have three different messages (one for when posts list returns empty, one for no internet connection and another for a failed request)? cc @osullivanchris

Also, if the post list returns empty from the back-end, does it make sense to provide a retry button? In theory it's going to return an empty post list again.

[osullivanchris]

I think two errors is enough as it might be difficult and not meaningful to distinguish between when the user had no internet connection, and when we failed to fulfil the request.

Something like:

• Posts failed to load: we couldn't load posts from this tag right now
• No posts for this tag: we couldn't find any posts tagged TagName right now

[RenanLukas]

cc @wargcm @dvdchr

[dvdchr]

Posts failed to load: we couldn't load posts from this tag right now

If we already have some posts locally under a certain tag, what do you think about displaying them instead of showing an error? This means the Posts failed to load message only appears when we have 0 posts under for this tag AND the request failed.

[sonarcloud]

Quality Gate failed

Failed conditions
11.5% Duplication on New Code (required ≤ 10%)

See analysis details on SonarCloud

[daniloercoli]

Nice work! LGTM