Update Trending Now cards to display patron (if reading log public)

[mekarpeles]

Overview

We'd like to update the Now view, i.e. https://openlibrary.org/trending/now should be updated so instead of saying "someone" marked book as [state] it instead shows their avatar and username as a link, perhaps with a button next to it to follow them, similar to #9415.

Context

• This builds off Adding trending view #6014 (see what files are involved), where we implemented a Trending page to show what books are being logged Now, this Month, etc.

Designs

Before:

After? perhaps something closer to:

Instructions

Before asking to be assigned, you can help by proposing a 🎨 design for this feature or asking any clarifying questions you may have. Thank you! ❤️

Also, if you're a new contributor, please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

Justification

The trending page is interesting but misses an opportunity enable patrons to discover deeper insights by exploring other books the patron may recommend, or by allowing them to be followed.

This may be a good first step in making our Follow feature useful.

Research

Are there any precedents or findings from other projects or studies that support this feature? (link or screenshot if possible)

Goodreads does something similar

Breakdown

Requirements Checklist

• Designs should be consistent with how patron avatars appear elsewhere on the site, use existing css where possible (e.g. the My Books feed page!) see Adds follow (pubsub) feature #8607 + Add avatars for followers feature #9415
• Designs should contain avatar, username (as link) and a small blue button to "Follow" the patron -- you might take inspiration from https://openlibrary.org/people/mekBot/books/feed
• Patron privacy must be respected -- only show patron if their reading log setting is public.

Related files

• See Adding trending view #6014: https://github.com/internetarchive/openlibrary/pull/6014/files#diff-b352027e4688f5ef14e5e23f6a988bba495e769f8cecce80c404a23d82f5902a

• See My Books Feed designs (e.g. https://openlibrary.org/people/mekBot/books/feed) Implemented by Adds follow (pubsub) feature #8607 in
  https://github.com/internetarchive/openlibrary/pull/8607/files#diff-1c0a702d7b1bad810adce7c001416b5996968d117077f629ff52ddff4668f56fR45-R51

[SharkyBytes]

Hi @mekarpeles,

Such a nice idea Mek, I’d love to work on this! Here’s my approach:

->I’ll create a mockup to display the patron’s avatar, username as a link, and a Follow button. I’ll ensure the design matches the current style of the site, especially following the look of the My Books feed page, and I'll make sure to use existing CSS where possible.
->I’ll update the backend to fetch public patron data (only if their reading log is public).
->On the frontend, I’ll add the patron’s avatar, make the username a clickable link, and include a small "Follow" button. It will be consistent with the existing follow functionality, ensuring patrons can easily follow others.

And then for the testing,
->After implementation, I’ll run tests for responsiveness, cross-browser compatibility, and edge cases like empty avatars or usernames. I’ll also check for smoothness with the follow feature.

This feature can help patrons discover more books through people they follow, and really could be the first step toward building social features on Open Library.

Let me know if you have any feedback or suggestions! 😊

[mekarpeles]

Hi @SharkyBytes! Thanks for these details.

I’ll update the backend to fetch public patron data (only if their reading log is public).

It's possible this part is done already! Or, I think we should take the approach of leaving it anonymous (if their reading log is private) and otherwise showing the new design. In either case, these two modes / design should hopefully be fairly consistent with each other.

Looking forward to seeing your designs and we can bring them for feedback to either our Tuesday or Friday community calls!

[mekarpeles]

Here's one design that standardizes the Catalog Card from the search results page with Events that might appear on the Feed or Trending Now page(s)

It proposes creating an augmented, extended version of the Catalog Card called a Catalog Card Event.

This would replace the current Trending Now card and make things a bit more standardized.

It's at least something we can work towards in the meantime (and then discuss designs further).

I think it will be important to develop things modularly such that the Event section can be reused in multiple contexts and that a Catalog Card Event component can be composed (as a template) by rendering a top Event section and then a Catalog Card (i.e. macro/SearchResultWork) below it.

[ananyakaligal]

@SharkyBytes are you still working on this?

[garv-crafteak]

Yeah, @ananyakaligal, I’m working on this. It’s almost done. I just need to check it with Mek now.

[mekarpeles]

Happy to provide a review when it's ready, thanks for working on this. Thanks for the offer to help @ananyakaligal! I'll followup on slack and see if we can work together to find a themed set of high impact issues to tackle together.

[SharkyBytes]

Hi @mekarpeles,

I’m currently working on this issue and am excited to start my contribution journey. I wanted to share an update with you and seek your advice.

Here’s what I’ve accomplished so far:

1. Successfully fetched the patron data.
2. Added the follow button.
3. Updated the underlined username link to redirect to the patron’s profile.
4. Ensured the "Want to Read" link navigates correctly to the patron’s "Want to Read" section.

Let me know if you’d like any adjustments to these features!

That said, I’m currently facing an issue with implementing the follow functionality (so the follow button works as expected). I’m actively working on resolving this, but if you have any suggestions, resources, or pointers that could save me from searching through the full codebase, it would be a huge help.

Thanks in advance for your guidance!

Current Implementation :-

[mekarpeles]

@SharkyBytes great work so far:

• Let's try to make the follow button follow the same type of style and classes as the rest of our buttons (e.g. consistent color and border-radius).
• For the follow button, you may wish to consult the Feed https://openlibrary.org/people/mekBot/books/feed referenced in the original post, which uses the Follow macro: https://github.com/internetarchive/openlibrary/blob/master/openlibrary/macros/Follow.html

What to do if a patron is not logged in?

This case is actually almost completely handled for us already by the Follow macro.

If a visitor navigates to the /trending/now page, the Follow macro will already show a real Follow button if they're logged in:
https://github.com/internetarchive/openlibrary/pull/8607/files#diff-f8a08ee2ccd19673120d20e7bb9a9bb0522f49eed20aa98edd0007787058c302R7

And if they're not logged in, an else condition will ensure the visitor get a Follow button that routes the visitor to login:
https://github.com/internetarchive/openlibrary/pull/8607/files#diff-f8a08ee2ccd19673120d20e7bb9a9bb0522f49eed20aa98edd0007787058c302R16-R17

The Follow macro is built so that in this login case, a special request variable ctx.path (i.e. the current url of the page we're rendering) is computed, so that whatever page calls it can be preserved by passing it along to the login endpoint request as a URL parameter called ?redir_url, so after the patron logs in, they can be redirected back to the page they came from. In this case, ctx.path would know we're on the /trending page and so the login redirect will happen for us automatically.

Opportunity

One caveat of this flow is, by logging in, we're not actually completing the Follow the patron requested! They have to click Follow, login, go back to /trending and figure out that they have to click Follow again, which is both non-intuitive and may be difficult as the /trending page changes from moment to moment and so the person they were trying to follow may not be on the page anymore! 🤦

I'm considering this a separate, followup issue tracked here (which has a volunteer: @ShilpThapak):

• Visitor actions that redirect to Login should remember & execute action #10338

[SharkyBytes]

Hey @mekarpeles,

I'm encountering an issue with the local instance of Open Library. I’ve set all reading activity to private, as shown in the image below. However, when I add books to the "Want to Read" section from my personal account, the system still displays my name and the section I added the book to. While the "Want to Read" link itself is protected (I can't view the detailed logs), it still reveals who added the book and where.

As we discussed earlier, the expected behavior should be to display something like "Someone added to Want to Read" instead of showing the user's name and activity details. Am I right?

I’ve also tried debugging the entry, but I’m unsure which field determines whether the reading logs are private. In the entry, I noticed that both openlibrary and personal show None for the private field, which seems to indicate no restrictions. Could you clarify which field controls this behavior and if there's a potential issue with the logic handling privacy settings?

[SharkyBytes]

Also, @mekarpeles, I noticed another issue regarding avatars. As shown in the image below, the avatar isn’t displaying because the /people/test_username/avatar redirects to the main archive site and shows "Item not available."

I had a detailed discussion about this with @scottbarnes, who was incredibly helpful. However, we’re now uncertain whether we should display a default avatar when no profile picture is available or if we should simply leave the avatar blank.

Would love your thoughts on this!

[mekarpeles]

You'll need to fetch the patrons privacy value from their account setting object (you should be able to perform a get_many on all the patrons in one page) and conditionally load their name / follow buttons, etc. there may also be a private book on the reading log entry

We should use a default avatar if private

We can do the following to get a mapping of patrons to their privacy:

usernames = ['mekBot', 'ScarTissue', 'seabelis', 'brewster', 'jachamp']
user_prefs = web.ctx.site.get_many([f'/people/{username}/preferences' for username in usernames])
followable = dict((user.key.split('/')[2], user.notifications.public_readlog == 'yes') for user in user_prefs)