feat: add roles into account header and info

[iruldi]

Add roles into account header and account info

Linked to issue: #2056

Added AccountRoleIndicator which is based on AccountBotIndicator so it has the same design. I use the color and name of the Role object to display it on the profile.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	57e8545
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/64bfddde9a822d0008c94ba7
😎 Deploy Preview	https://deploy-preview-2265--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.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	57e8545
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/64bfddde42f51700081bb6e5

[patak-dev]

Thanks for the PR! I don't know how well this will work out when there are many labels but let's get it merged and keep iterating once we get a good report.

[EddiesTech]

Is it intentional that when there is no specific role, there is an empty box? I am assuming not. I've attached an image from Elk Canary.
@iruldi @patak-dev

[patak-dev]

Maybe that user has a role that is an empty string? You could send a PR to guard against that. I don't see the empty box in https://main.elk.zone/ for any of the users I follow.

[EddiesTech]

Hmm, ok. I'll do a bit of testing and try and figure out why that's happened then.

[patak-dev]

@iruldi, @EddiesTech is right, it seems there is an empty box when you hover over users, and also on the user switcher on the bottom left. PR welcome to fix this one if you have some time

[iruldi]

@patak-dev Thanks, I'll do that soon!

[iruldi]

Didn't know why it was showing up some times but now it should not be the case anymore and it's much better this way.

PR: #2333