Add follow button to highlighted post

[haileyok]

Doing some modifications on the highlighted post.

1. Adding a follow button

• Button is initially visible if the user is not being followed.
• The button stays visible even after the user is followed until the user leaves the screen
• The button will be removed/added both on blur and on focus, so it will maintain visibility with the viewer in the profile's shadow

2. Remove the TimeElappsed from the highlighted post. We are displaying the timestamp below, and having this there is hindering us having the button there. This is the common behavior in other apps as well.
3. Removing static width on the display name and handle. We flex these properly now so that they take up the full line instead of being truncated. This prevents some issues that we were seeing with longer display names (especially whenever using larger font sizes)

Screen.Recording.2024-02-10.at.5.21.38.PM.mov

[surfdude29]

Sorry for jumping in here unsolicited, but what about simply using a plus sign as the icon on mobile? It would be reminiscent of the + Follow button on the profile page just without the text.

I think the function of the button would be more intuitive to users and would prompt fewer "Oh **** I didn't realise tapping that meant Follow" situations. Especially when the user is perhaps distracted, not paying full attention etc and notices and reacts after the 3 seconds have elapsed and it's too late to undo.

Here is a crude iOS mockup (based on 1.67 so the layout of other elements is out-of-date):

Also, an alternate/follow-up suggestion that builds on that which would add a tiny bit more friction but which might be a good tradeoff: what about making it a two-stage process? Tap the + button once, it then expands into a full-width + Follow button identical to the one on the profile page, and tapping on that then triggers the behaviour already outlined: the button changes state and fades away (probably immediately in this case?)

This option would have the advantage of avoiding accidental follows almost entirely.

[haileyok]

Hey it's open for a reason, always feel free to jump in!

I had the same thought about the icon, but wasn't sure that the plus by itself was clear enough. I also feel the same way about the current icon though, so... :)

I'm not opposed at all though to having a modal that verifies your decision to follow, I'll see how nicely that implements, but I suspect it would be pretty nice actually. Would only use it on mobile I think?

[gaearon]

Re: three seconds, I'd just keep it there (so it stays if you weren't following at the time you pressed into the post).

[haileyok]

Re: three seconds, I'd just keep it there (so it stays if you weren't following at the time you pressed into the post).

Yea agree. I made some more changes here as noted above, including removing the 3 seconds. I think this is actually a better look. We update the wasFollowing state on focus as well so that we can stay in sync with the profile shadow.

Not really sure why we had static width for the display names either, but I think this looks better. There's no reason imo to be keeping the names at sometimes under half the screen size when there's nothing else to display.

[haileyok]

@emilyliu7321 Just tagging you for your input here on whats above

[surfdude29]

@haileyok The solution you've arrived at is great, nice job! :)

[pfrazee]

If we're looking to reduce down to an icon, maybe this:

[pfrazee]

Looks good to me!