Show Users Their Own Follower Counts

[jicruz96]

Summary

Closes #1879

Checklist

• On the frontend, I've made my strings translate-able.
• [n/a] If I've added shared components, I've added a storybook story.
• I've made pages responsive and look good on mobile.

Screenshots

Known issues

Button design

• The Figma design presents a simple follow/unfollow link for each user, but
• I used the FollowUserButton component instead. Looks better and had preset logic for following users.
• But now its button design is inconsistent vis-a-vis the Following tab. If it were up to me, I'd change that button too. Happy to change either tabs' button to align with the other tab upon request.

No confirmation modal

• The Following tab uses a modal to confirm when a user wants to unfollow something.
• I'm not doing that here. It wasn't part of the Issue/Figma spec.
• any interest in confirmation modal/follow button logic improvements in a subsequent PR?

Dispersed/Stale Logic

This PR implements only what #1879 asks for, but I'm hoping y'all will allow some subsequent PRs where I try to clean some stuff up.

While coding, I kept finding more and more instances of stale code and dispersed/repeated logic that I really wanted to refactor away (my first go at this ticket, in fact, got carried away with refactoring).

If refactor PRs aren't welcome, just let me know.

Steps to test/reproduce

Run application server with yarn dev:up

Note: It's possible the command will fail (as it did with me) due to the recent codebase upgrade to node 20. Use these commands to rebuild your images:

# Stop everything and remove containers/volumes from this project
docker compose -f infra/docker-compose.yml down -v --remove-orphans

# Nuke old build cache so base images get re-pulled
docker builder prune -af

# Rebuild WITH no cache and pull latest base images
docker compose -f infra/docker-compose.yml build --no-cache --pull

# Try again
yarn dev:up

Spoof a Follower

Note: If you know of a better way, be my guest (and teach me how!)

1. Sign in as your test user: [email protected] with password password.
2. Make another user follow your test user: Go to http://localhost:3010/firestore , navigate to the users collection, pick any user other than yours (I recommend user 0BvO7rSlFjRVHuLfd7RlHRYg2DN2), create a collection called activeTopicSubscriptions, with document ID testimony-05lcy6YQrPvPRvVPlZFbCA0O81TF), key userLookup and value of type mapping. The mapping should have key profileId set to your user's profile ID: 05lcy6YQrPvPRvVPlZFbCA0O81TF.

2. Make sure your follower has a public profile page: Navigate to the profiles collection and find your follower's profile. If it doesn't exist, create it, and make sure it at least has the fields public (boolean) and fullName (string).

Check Followers tab in Edit Profile page

1. Go to http://localhost:3000/edit-profile/followers .
2. Ensure that everything looks as expected, according to the Figma design doc. (Note: pagination is considered out of scope for this ticket.)
3. Try following your follower back. Check firestore (http://localhost:3010/firestore/default/data/users/05lcy6YQrPvPRvVPlZFbCA0O81TF) to make sure you are now following your follower.
4. Try unfollowing. Check firestore again to make sure you are not following your follower.

Edge Cases

Private follower

In firestore, set your followers' profile to private. Reload the Followers tab. The follower should now appear as an Anonymous User.

Public follower with no profile

Note: I'm not even sure if this is possible in prod, but in dev there are plenty of users without a profile.

Find a user ID in the dev server firestore that does not exist in the profiles collection and set that user to be a follower, exactly how you did in step 1. Reload the Followers tab. The follower should now appear as an Anonymous User.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
maple-dev	✅ Ready	Preview	Comment	Aug 15, 2025 1:25pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
maple-prod	⬜️ Ignored			Aug 15, 2025 1:25pm

[jicruz96]

Just noticed #1910 is handling pagination for the other tabs. I'm going to make a separate PR to add pagination to the Followers Tab as well.

[Mephistic]

Love this - just a few small notes.

As for the questions:

• 👍 to using the FollowButton as opposed to the raw text. I'd be in favor of using that consistently across both the Following and Followers page (but that doesn't need to be part of this PR).
• IMO the confirmation modal is less critical here given that the Follower won't disappear from the page if you unfollow them (because the page is showing people who follow you, regardless of if you follow them back) so it's easier for a user to just re-follow/unfollow if they misclick.
• Always happy to accept cleanup/refactor PRs, but we'd usually prefer them to be their own separate PR instead of rolled into another change. I would recommend touching base with the team before a big refactor just to avoid wasting effort.
• I'm 99% sure all users are expected to have profiles at this point, but older test data (especially on the dev site) might be wonky and broken. Feel free to point out any users you run into that are in this state and we'll see what we can do about making the world right.