feat: add username modes

[snowfudge]

This adds username modes on both the chat message and the user list for to allow css styling. Users can then style names based on the username modes which only worked on the user list prior to this commit.

Currently it only exist on the userlist, e.g:

<div class="user-mode op">
  <span class="user" data-name="thelounge01" role="button">@thelounge01</span>
  <span class="user" data-name="thelounge02" role="button">@thelounge02</span>
</div>

<div class="user-mode half-op">
  <span class="user" data-name="halfop01" role="button">%halfop01</span>
  <span class="user" data-name="halfop02" role="button">%halfop02</span>
  <span class="user" data-name="halfop03" role="button">%halfop03</span>
</div>

But not the chat message, e.g.:

<div id="msg-2015949" class="msg" data-type="message" data-from="randomuser">
  <span
    aria-hidden="true"
    aria-label="7 February 2024, 14:07:27"
    class="time tooltipped tooltipped-e"
    >14:07</span
  >
  <span class="from">
    <span class="only-copy" aria-hidden="true">&lt;</span>
    <span class="only-copy" aria-hidden="true">&gt;&nbsp;</span>
  </span>
  <span class="user" data-name="randomuser" role="button">randomuser</span>
  <span class="content" dir="auto">Not working</span>
</div>

This PR aims to add user mode status on the username element so it'll show something like this both on the user list and chat message list:

<span class="user op" data-name="op01" role="button">@op01</span>
<span class="user half-op" data-name="halfop01" role="button">@halfop01</span>
<span class="user voice" data-name="voice01" role="button">@voice01</span>

[brunnre8]

Thanks for your contribution. I do have some comments, see below

[snowfudge]

Kindly let me know if there are any further changes I have to make to make this happen 😄

[brunnre8]

rebase the PR and fold the fixup commit into the main one.

But no, I'm simply lacking time due to life.
Sorry for that, I'll get to it soon, promised.

[brunnre8]

why did you add a space here?

[snowfudge]

This was a goof-up on my side, apparently I didn't remove it when I moved the user modes to data-mode attribute. Will fix!

[brunnre8]

The one thing which is a bit funny now is that if a "mode" user speaks, they get the mode data-attribute set as expected.

However, if that user gets mentioned it does not.

Is this desired?

[brunnre8]

modeName seems a poor name, why not keep it as modeCharToName?
It's a mapping, not a mode name.

[snowfudge]

That's fair, I'll have it changed

[brunnre8]

You are dropping normal from the list, did you check that this is safe to do and it is in fact never hit?

[snowfudge]

My mistake - normal was used on the css as a grouping name so I placed it back.
https://github.com/snowfudge/thelounge/blob/c426de9e7e18ad0393b1356575e2b0701321158f/client/css/style.css#L1809-L1811

I've also added back the "!" based on PR#354 because I don't want to break things.
Changed operator -> op as well because again, it's used on the default styling as a grouping name

https://github.com/snowfudge/thelounge/blob/c426de9e7e18ad0393b1356575e2b0701321158f/client/css/style.css#L1797-L1799

[snowfudge]

The one thing which is a bit funny now is that if a "mode" user speaks, they get the mode data-attribute set as expected.

However, if that user gets mentioned it does not.

Is this desired?

This is intended, yes. Initial reason was to style the username when they say something in the server so it's easier to, for example, know when an admin or an op says something. If they ping us, we get notified anyway by default. If they ping let say voiced users, said users will get the notification, which is why I deem it unnecessary to add the data atribute user mode to any pinged users of the message.