fix(ui): move account lock and bot icons next to name in timeline

[shuuji3]

fix #2492

As explained in the original issue, showing the account lock 🔒 icon on the status card is quite confusing:

I think this decision in the official Mastodon UI is reasonable because the meaning of 🔒 icon on Mastodon differs from that on Twitter.

On Twitter, 🔒 icon for the account has two meanings at the same time: the account requires to follow requests, and the visibility of all the posts is limited to "Only follower". So showing 🔒 icon on the status makes sense.

On the other hand, on Mastodon, the visibility of posts and account following limitations are separated. And the locked account still can publish publicly visible posts so 🔒 icon only indicates that the following approval is required when someone is following.

Mastodon already has the icon for visibility on the post (such as 🌎 and 🔒) so it should be enough to show 🔒 icon only on the account page (or other account-specific component) where users need to know whether the account requires the following request or not.

Although Mastodon UI doesn't show the bot icon too, I think we can keep it because the bot icon can show both meanings: the account is automated and the post itself is programmatically published by the bot.

After

The status detail page still shows the lock indicator as the visibility indicator is clearly separated in different places without confusion.

Another example with the lock icon:

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	6fec751
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/66110597a451550008ff40b1

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	bdb3c30
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/678ba447a918b70008695daf
😎 Deploy Preview	https://deploy-preview-2772--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ayoayco]

To me it's more about the position of the icon. I think if the lock is for the account it should be visible & closer to the name/profile picture. Then maybe we can also show consistently in different profile views?

I wonder if we could have two rows in the status card similar as in the profile page...

the name + icons (at top) and username (bottom)

[shuuji3]

Sorry for the late response! Right, it's better to have adjusted the icon position instead of reducing information by deleting this.

I think changing to two rows is a good option worth exploring. But that will change all post height and layout in a timeline, so I'm not sure how that UI change affects the current design. I'd like to create a separate PR for that change.

Here's new position for the lock icon. I also moved the bot icon as they should be in the same group (attributes of the author's account).

(note: lock and bot icons are mocked for screenshot)

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	bdb3c30
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/678ba44733a0b800082692f8