feat/emote-menu-sorting: Add sorting to emote menu.

[berghall]

The sorting will default to newest added emote.

Closes #398, #511

[AnatoleAM]

This currently breaks one core design point of the emote menu, which is width sort, with wider emotes towards the bottom. This should continue to apply regardless of other sorting checks.

[berghall]

@AnatoleAM PR updated with request changes. This sorting happens only after sortCase() which handles the widths, so it works as expected and doesn't break the width priority.

[AnatoleAM]

Functionality wise this works fine now. In terms of user experience though, this isn't great.

The sorting options should be within the emote menu itself. i.e, next to the search bar.

[berghall]

@AnatoleAM I guess I should use the font-awesome icons and I need the svg, so could I get them from you?
Was thinking for the order these two https://fontawesome.com/icons/sort-up?f=classic&s=duotone&sc=%231E3050 and https://fontawesome.com/icons/sort-down?f=classic&s=duotone&sc=%231E3050.
For the sort type https://fontawesome.com/icons/bars-sort?f=classic&s=solid

[AnatoleAM]

@berghall added the icons on your branch

[berghall]

@AnatoleAM controls are now next to the search input

Live input search:

[ayyybubu]

Not really a fan of adding more clutter to the menu and shrinking the size of the search bar. All of this could be wrapped inside a single context menu.

[berghall]

If I were to combine them into one menu, then I'd need these two:
https://fontawesome.com/icons/arrow-up-wide-short?f=classic&s=solid
https://fontawesome.com/icons/arrow-down-wide-short?f=classic&s=solid

[ayyybubu]

You can just use the bars-sort icon you already have. It doesn't really matter

[berghall]

Updated

Changed the position when live input search is on, to top of settings button

[ayyybubu]

Very nice so far. I noticed some minor cosmetic issues:

• extend the clickable area to the whole container (currently only the sort icon is clickable)
• make the context menu tabs the same width (they are off by a couple of pixels)
• the default color of the sort icon in the search bar could be var(--seventv-text-color-secondary) and then it would turn into var(--seventv-text-color-normal) when focused (currently the icon really sticks out)

[berghall]

@ayyybubu your requested changes have been implemented.

[ayyybubu]

Thank you, it looks pretty clean now. The last thing that i forgot to mention before:
-clicking on the sort button again should hide the active context menu

[berghall]

-clicking on the sort button again should hide the active context menu

@ayyybubu this is now fixed.

[berghall]

@AnatoleAM your requested changes have been implemented.

[berghall]

@AnatoleAM merge conflicts resolved

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ berghall
❌ AnatoleAM
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[TroyKomodo]

Features against this repo wont be implemented, we are going to rewrite the extension on this repo.