Change profile pronouns to closer follow MSC4247

[ranidspace]

Description

The pronouns field is an array of pronoun sets rather than the entire array representing one set. This follows MSC4247, and aligns with the way it's displayed in gomuks and Commet.

For compatibility with gomuks, the value of language for each is set to "en". In the future this should be set manually or use the client language.

Pronoun summaries are limited to 16 characters each, and truncated to that length if it is longer. When displayed as a string, or when it is set, they are comma separated. When they are displayed next to the username in a message, they're each in an individual pill, only showing the first 3. If more than 3 are there, an extra pill showing "..." is displayed.

An optional grammatical_gender field now exists, however it is currently unused.

Fixes #23

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Users would have to re-set their pronouns to display correctly

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

The changes are simple and self explanatory, and documentation appears to not exist

[ranidspace]

I have another commit which sets it to only display one set of pronouns on mobile, however it causes visual issues as mentioned.

Adding white-space: no-wrap fixes it, but takes more space away from the username. What do you think?

[7w1]

I think it's better to cut into the username a little. The pronoun pills can always be disabled in settings for anyone who doesn't want that and I think most users don't have long enough names where this would matter (i.e. most names that long are multiple words, where users also just go by a shorter nickname).

[ranidspace]

I think I'm happy with it now, displays it properly on mobile.

I also remade a lot of it to be similar to how other things are rendered. It has a common style for all elements instead of defining it for each element. Not sure if I overcomplicated it. I'm new to react

[7w1]

Looks good! Thanks for contributing!