feat(ui): Match account metadata icon names with trailing colons and add/update more icons

[ZMYaro]

This also addresses the email half of #1683.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	aa9951b
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/6413946090f5e60008e9c3ab

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	aa9951b
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/64139460a3418c00072362e2
😎 Deploy Preview	https://deploy-preview-1693--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 settings.

[ZMYaro]

Specifically, I added/altered Birth, Birthday, BuyMeACoffee, 'Buy Me A Coffee', Chat, Email, E-mail, Facebook, Home, 'Home Page', Homepage, IRC, Joined, KoFi, Ko-fi, Meatspace, Nintendo Switch, Skype, Slack, Snapchat, Substack, and Tumblr.

This also fixes it so a field called Email:, for example, still gets the icon for Email.

(Edits: I added more; I think this is all of them. I also rebased this so putting quotes around all icons is a separate commit so it is clear in the diff where I added icons.)

[patak-dev]

We need to implement the matching separated from the list (maybe you could add an alias field or a new alias map?). The issue with the PR right now is that when rendering the full list to pick from, you get several duplicates:

[ZMYaro]

We need to implement the matching separated from the list (maybe you could add an alias field or a new alias map?). The issue with the PR right now is that when rendering the full list to pick from, you get several duplicates

@patak-dev I didn't realize that was something you wanted addressed in this PR since the duplicate key icons were already present. I can add an alias map later.

[ZMYaro]

@patak-dev Looking into this now, even after constructing an alias map, I am not sure how you want to decide which text label is the default for each icon. For instance, I am not sure how to decide whether the key icon should insert the “GPG”, “Keyoxide”, “PGP”, or “OpenPGP” label by default.

[patak-dev]

@ZMYaro ah, I didn't realize that PGP and Language were both already duplicated. I think the issue with this PR is that it is a lot more evident after it.

About what Label to use, we could select the most common one as the default (or any of them if all are similar in use). This is only to avoid duplicates in the picker, so I think it is ok to pick one of them. If the user writes the label by hand, the icon would still be properly assigned.

[ZMYaro]

@patak-dev I am thinking then having the alias list isn't the best solution for that menu, and it would be better to have a list of featured labels specifically for that component? Because I agree we (for example) don't need both “Home Page” and “Homepage”, but it does makes sense to keep both “GPG” and “Keyoxide” available.

[patak-dev]

In the case of “GPG” and “Keyoxide”, they better have different icons if possible, no? Not an issue if some of them end up duplicated though for now. Just that we can't have Ko-Fi and KoFi

[ZMYaro]

In the case of “GPG” and “Keyoxide”, they better have different icons if possible, no?

@patak-dev Right now, they have the same icon (you can see right now in Elk stable). If we picked one label for each icon, we would have to pick one and rule out all the others. That was why I suggested it might work better to have a list of labels to suggest in the SettingsProfileMetadata menu and keep the existing map of labels to icons.

Edit: I pushed an implementation of that; let me know what you think.