feat: show headset mic for voice channel mentions

[Asraye]

Display the "headset_mic" icon for voice channel mentions, rather than the same "tag" - Makes it easier to distinguish channel types and provides a more friendly UI.

How was this PR tested?

Tested locally via typing the channel in text input, as well as after sent.

Screenshots & Screencasts (if appropriate)

Checklist:

• I have carefully read the contributing guidelines
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation if applicable
• I have no unrelated changes in the PR
• I have confirmed that any new dependencies are strictly necessary
• I have written tests for new code (if applicable)
• I have followed naming conventions/patterns in the surrounding code

Please declare, if any, LLM usage involved in creating this PR

None
...

[Dadadah]

I think this needs UI/UX review

[infi]

Ideally icons per channel type should be centrally defined, hardcoding it in more places is not a good idea for long term maintenance ability. Merging this change as it is would make this harder however. Can this PR be expanded to define constants instead of hardcoded strings?

[Asraye]

Ideally icons per channel type should be centrally defined, hardcoding it in more places is not a good idea for long term maintenance ability. Merging this change as it is would make this harder however. Can this PR be expanded to define constants instead of hardcoded strings?

@infi
Good point. Is there a preferred global constants file I should add these to, or should I create a new shared file somewhere for them?

Additionally; Do you want me to expand this PR beyond just the two files and add these constants into ServerSidebar & ChannelHeader? or, keep it contained to just these for now?

[Dadadah]

I spoke with infi about this.

Please put the constant definition in the packages/client/components/common/lib folder, and make sure you export it in the common package. Then update the icon reference on the sidebar and channel header as long as they are the same icon (if they aren't we will need to discuss further on it.) I would suggest creating a function that takes a channel and returns an icon string for that channel.

[Asraye]

@Dadadah @infi
Updated

PS: Added TEXT_SIDEBAR & TEXT_MENTION as they use slightly different icons for the # symbol (literally just different tilt), but If they're made to use the same one. It looks terrible!

[Dadadah]

I like the solution using a context flag. Thanks. I'll have infi review this again.