Handling mentions

[jane-leon]

Summary

Added a toggle feature to view shoutouts that mention you. This is the first step to implementing a feature where people are able to see mentioned shoutouts.

• Added toggle button to switch between "Given Shoutouts" and "Shoutouts Mentioning You" views
• Implemented client-side filtering to detect mentions of user's name in receiver field
• Fetches all shoutouts and filters for mentions containing user's first name, last name, or full name

Test Plan

1. Navigated to the shoutouts page
2. Verified the toggle buttons ("Given" and "Mentions") appear next to the heading
3. Click "Given" - should show shoutouts you've given to others
4. Click "Mentions" - should show shoutouts where your name appears in the receiver field
5. Tested edge cases:
   • Shoutouts with just your first name (casing shouldn't matter)
   • Shoutouts with your full name
   • Shoutouts mentioning multiple people
   • No shoutouts

Notes

This is just phase 1 meaning only checks the receiver field for mentions (not the message body)

• Uses client-side filtering with getAllShoutouts() to catch partial name matches
• Future enhancement: Add proper @ mention tagging or maybe a dropdown list when choosing who to shoutout

[dti-github-bot]

[diff-counting] Significant lines: 72.

[ladriennel]

Hi Jane! Thanks for working on this and great work so far on this PR. I'm just gonna leave a few comments here on potential fixes and suggestions!

[ladriennel]

One thing I noticed was that in the mentions tab, users can edit and delete shoutouts which they didn’t write. One potential fix could be adding a canEdit field to the ShoutoutCard component that checks if the user is the giver of that shoutout.

[ladriennel]

When testing, I also saw that in my mentions tab since my last name is "Lee", it includes shoutouts mentioning members like “Brandon Lee” and “Darin Lee” because the mention detection allows matches on just last name which is too broad.

The same issue can occur if members have the same first name, so it may be better for future consideration to implement the explicit @ tagging or dropdown feature to clear name ambiguity. I know you mentioned that as a future enhancement, and I think it's a good idea!

For now, I think it would good to at least remove the receiverLower.includes(lastName) || check.

Let me know what you think!