Reader: Update ReaderTagCell to new UI

[wargcm]

Fixes #23184

Description

Updates the Reader tag cell to the new UI: p1715247952499939/1715197207.367749-slack-C05N140C8H5

Testing

To test:

• Launch Jetpack and login
• Enable the "Reader Tags Feed" feature flag
• Navigate to the "Your Tags" feed
• After the feed loads, 🔎 verify the UI is updated to the UI referenced above

Regression Notes

1. Potential unintended areas of impact
   Should be none.

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

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)

[dangermattic]

	1 Warning
⚠️	View files have been modified, but no screenshot or video is included in the pull request. Consider adding some for clarity.

Generated by 🚫 Danger

[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	pr23185-4e99197
	Version	24.9
	Bundle ID	org.wordpress.alpha
	Commit	4e99197
	App Center Build	WPiOS - One-Offs #9928

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	pr23185-4e99197
	Version	24.9
	Bundle ID	com.jetpack.alpha
	Commit	4e99197
	App Center Build	jetpack-installable-builds #8977

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

[osullivanchris]

This looks pretty great right away. Much better than the other layout I had tried on Android.

2 small things that stand out:

• think we need more horizontal padding between the cards
• the skeleton loading state looks good. But then there's a much less subtle green loader for the images which load more slowly, which kinda draws too much attention. Could they keep just the grey skeleton effect?
• I think we had gone for tapping on a tag chip filtering the feed rather than drilling down. Not for the arrow at the end of the carousel, I think that works as expected.

I left some discussion items in slack where we can follow up further.

[salimbraksa]

Hey @wargcm , I'm bumping the milestone for this PR to 25.0 as I'm starting the code freeze. If this PR needs to go into 24.9, please go ahead and re-target it to the release branch.

[wargcm]

think we need more horizontal padding between the cards

Fixed in abac353.

the skeleton loading state looks good. But then there's a much less subtle green loader for the images which load more slowly, which kinda draws too much attention. Could they keep just the grey skeleton effect?

I was having some issues getting our ghost animation library to play nice with our custom image view. I'll try to fix this in a future PR.

I think we had gone for tapping on a tag chip filtering the feed rather than drilling down. Not for the arrow at the end of the carousel, I think that works as expected.

Fixed in 93f2856.

I've also updated the iPad sizing to match the Figma sizes in 5af9626.

Thanks for taking a look! I'm going to mark this as ready for review.

[osullivanchris]

thanks @wargcm for the tweaks, as you marked ready for review does that mean I should see those updates if I install the build from this PR?

[wargcm]

@osullivanchris Yep! It looks like #23185 (comment) was updated to the latest commit automatically.

[dvdchr]

Changes are looking good!

[osullivanchris]

Looking good, thanks for the improvements. One small thing. When I get to the end of the carousels the view background is the standard grey rather than white, looks a bit off.

[osullivanchris]

Hey this is looking pretty tight overall. still seeing 4 lines of heading and excerpt in some cases, making the content taller than the image. I had suggested max 3 lines + 64 image. Or if we want to have 4 lines, bumping up the img to 80 so that the content lines up. But its not looking too bad or anything.

One other tiny detail is maybe add 8pt padding under the tag heading, its getting a bit tight to the blog name.

[dvdchr]

Latest changes are looking good for me. LGTM!