✨ Activity View - Enhance homepage activity tabs and metadata display

[ssw-yakshaver]

Requested by: @Aibono1225 via YakShaver.ai 🦬
cc: @Marxoz, @jakebayliss, @Aibono1225, @tiagov8, @PothieuG, @Freego1783, @andrewwaltosssw

Hi Team!

  🟥  Watch the video (2 min 46 sec)

  Url from screen share: https://app-sswrules-staging-pr-2529.azurewebsites.net/rules/?view=activity

Pain

Update the Rules V3 homepage Activity View to improve usability and visual feedback. Make 'Most Liked' the default first tab, add subtle animation feedback when switching between activity tabs, adjust the tab order, enhance rule metadata by showing a shortened category label next to the publish date, and improve the Recent Comments section by making avatars clearer and refining the heading placement.

Acceptance Criteria

1. 'Most Liked' is the first (default) activity tab, followed by 'Most Commented', with 'Last Commented' as the third tab on the right.
2. When a user clicks 'Most Liked', the thumbs-up count animates by briefly growing in size (and/or becoming bold) and then returning to normal.
3. When a user clicks 'Most Commented', the comment count animates by briefly growing in size (and/or becoming bold) and then returning to normal.
4. When a user clicks 'Last Commented', the 'last commented' timestamp briefly grows in size (and/or becomes bold) and then returns to normal.
5. Next to the publish date, the rule’s category is displayed using a shortened label (only the word after 'Rules to Better', e.g. 'AI', 'Teams').
6. If a rule belongs to multiple 'Rules to Better' categories, only the shortened category word(s) are displayed, without the 'Rules to Better' prefix.
7. In the right-hand column, the 'Recent Comments' heading is displayed outside and above the container box and styled prominently (e.g. black text).
8. Recent comment user avatars are displayed larger to make faces more recognisable.
9. Avatar shape may be square instead of circular, with no loss of clarity.

Screenshot

Figure: Homepage activity tabs ordering and visual feedback on selection

[Aibono1225]

Some feedback from @tiagov8 :

1. The border radius is inconsistent
2. The "Sort by" alignment is off
3. We don't bold the titles (see a category index for reference)
4. The #1... etc is also inconsistent in size, weight, color...

On the Comments sidebar section...
5. The heading should be consistent with category view (black instead of red)
6. The rules titles should be consistent (black with red on hover)
7. The rules titles should be visible in multiple lines (no elipsis...)
8. The link area should be only on the rule title (currently it is also on the commenter name and the words next to it)

✅ All Done - Changes on staging: https://app-sswrules-staging-pr-2529.azurewebsites.net/rules/

[Aibono1225]

As per my conversation with @adamcogan

• Make the click animation appear twice in the Activity View
• Set Activity View as the default view for the homepage
• Change Activity View to What’s hot 🔥
• Next to Latest Commented, add new button "Latest Rules"
• Get test pass from Tiago
• Get test pass from someone else in the French office

[Aibono1225]

Update:
The changes mentioned above are now on staging: https://app-sswrules-staging.azurewebsites.net/rules/

Hi @tiagov8 ,

1. Test Please 🙂

Figure: This is what the new view looks like now

[tiagov8]

Update: The changes mentioned above are now on staging: https://app-sswrules-staging.azurewebsites.net/rules/

Hi @tiagov8 ,

1. Test Please 🙂

Hi @Aibono1225

More feedback was sent via Teams. When I give a test pass there, I will replicate it here ;)

[tiagov8]

Hi @Aibono1225

As per Teams, it's a ✅ test pass from me after the latest changes ;)

Thanks for all the work with this

https://app-sswrules-staging.azurewebsites.net/rules/

[Aibono1225]

✅ Done - the page is now live: https://www.ssw.com.au/rules/