feat: Add rated category snaps to the Games tab

[ashuntu]

This PR adds an ordered list of snaps based on their rating to the Games tab. Doing this required adding support for the top charts endpoints from the ratings service to the ratings client.

I've added this as a new variation of the CategorySnapList, so hopefully if we intend to incorporate top charts into other areas of the app, we can easily reuse the RatedCategorySnapList. A spinner is displayed while the list is loading; it does take a moment since we have to fetch the snap details for each snap ID.

This is more or less what it looks like, though the actual snaps displayed will not be the same:

UDENG-3351

[anasereijo]

This is looking nice!

• It would be helpful if you could share a screenshot of how it looks next to other sections, such as app cards, etc. Is this something you can share here?

• The way I designed it originally was to fit 4 cols (in the wide window) to add some interesting layout to the page. So the cards are 3 columns, and this is 4. See the screenshot below (grid in pale pink)

• I suppose that the titles (Top rated, etc) are the same size as the ones in the Explore page, right?

• The numbers seem too big. Can you decrease the font size?

Hope this makes sense :)

[ashuntu]

I decreased the font size of the numbers from 24 to 16. Here are some additional screenshots (with the font size change):

And this is what it looks like fullscreen (I have a 1440p 16:10 display):

I had some trouble fitting in 4 apps in a row without compromising the titles/descriptions, but if you'd like, I can take another look at doing that.

The titles are the same size as the other page headings, yes.

[anasereijo]

Thanks @ashuntu, the smaller numbers are looking better.

If you have the capacity, I think it is worth trying to fit the charts in 4 cols on the widest screen. Looking at the screenshot seems that you have a 'card' around the app when on hover. That isn't necessary (the whole area should be clickable though) and maybe it will save up some space to fit the 4 cols? It will also decrease the padding between the number and the icon, I think.

maybe @spydon has some ideas too.

Also, I am happy to jump in a call with you if easier to discuss this! :)

[ashuntu]

How does this look? (this still includes an outline on hover)

[anasereijo]

I think this could work, thanks for trying @ashuntu!

• What is the padding between each column? It should match the padding used in the other sections.
• We don't need the outline on hover. It can be just clickable but without the outline
• Maybe is due being a screenshot, but seems that the numbers are out of the grid?:

Thank you!

[ashuntu]

I removed the border on hover now.

For the columns, they should have the same padding as the other cards (they use the same grid, just have different column count and aspect ratio).

I think the numbers are slightly out of the grid in the same way that the other titles (like the F in "Featured Titles" in the screenshot you showed) are. This happens on all the pages it looks like, where the first letter in titles is slightly out of bounds. If I had to guess, that's just due to the font, but I'm not sure. Maybe someone else from the apps squad would know better than me on that.

[anasereijo]

Thanks, @ashuntu! I can bring that up with the squad, as it's something not really related then to this PR.

That said, LGTM! thanks for making the changes.

[spydon]

Do we have any text style in the theme that fits here?

[spydon]

kCardSpacing maybe?

[spydon]

Wait, the number is the key, and the snap is the value? 🤔
That seems backwards?

[ashuntu]

The key in this is just from the .asMap call, so I can get the index and give each snap a number next to it based on the index (its rank). Is there a different way you would do it?