Refactor DropDownMenu

[Segergren]

Refined DropDownMenu

• Introduced a refreshed design aligning with the overall application aesthetic.
• Animated arrows
• Dropdown now shows above the button if there's not enough room below it.

[lulzsun]

Hey, this looks great. However, this simple animation requires the framer motion package which in my opinion adds unnecessary bloat.

Do you think you can replicate this animation using just Tailwind CSS classes and/or vanilla CSS?

[Segergren]

Hi, I'm planning on adding more animations in the future and Framer Motion is, from what I know, one of the most used one in React.

The size is ~2 MB so I don't think that's too much (if you compare to other libraries and the FFMPEG exes for example).

I fully understand your point but is it okay to use it if I'll implement more animations in the future?

[lulzsun]

File size is not something I am too worried about (especially with simple Javascript packages, these get minified pretty well).

I am just worried for performance since Javascript-based animations can be way slower than just using some simple CSS animation tricks, especially for this spinning arrow animation which can be easily done using such.

I have already experience some poor performance on Linux (due to it using a different webview component, when compared to Windows WebView2 which is very fast), so this is what I am trying to avoid for the future.

[lulzsun]

I'm sure that this simple animation right now is meaningless to argue for performance, but in general I'd like to reduce potential tech debt for when we want to pull in external libraries to do stuff that we can already do with our existing or standard libraries.

[lulzsun]

Another thing to mention is that I plan to rewrite most of the interface in the future to support better accessibility using game controllers, so that RePlays may work for devices such as the Steam Deck.

So I'd like to avoid spending our time and efforts on styling choices because it may be completely rewritten in the end.

[Segergren]

Okay. From my experience, Framer Motion offers a lot of flexibility and I personally find it easier to work with. Achieving the same level of detail with stiffness and damping for natural, fluid motion is nearly impossible with just CSS animations.

I compared the dropdown performance both with and without Framer Motion animations. Although it's not backed by rigorous statistical proof, I'm convinced the comparison illustrates that incorporating JS animations has a minimal impact on performance.

And despite the potential UI rewrite, I'd still like to add more animations. Video: https://github.com/lulzsun/RePlays/assets/58270063/ace275b3-989b-463b-b351-ca54eb1ae41b

[lulzsun]

As I mentioned previously, simple animations like this are meaningless to argue for performance, so yes I understand that there may be minimal impact on performance. Your test of the performance impact is flawed in many different ways, but I'll ignore that because I don't think it is worth arguing about the impact of one single spinning dropdown arrow.

I don't see the benefit of having this level of detail of fluid motion that you are describing, and also I don't believe something like this is "nearly impossible" with just CSS animations. It may not look the same with CSS tricks, but at least it is not pulling in a package to do something that browser technologies can already do.

I do not wish to pull in packages that I myself do not plan to use. It will just create bloat, division of code, and increase tech debt. I just do not see the beneficial value of using framer motion animations, and I'm not too impressed with having nice animations in the first place.

I prefer to focus function over aesthetics, and this is not just an opinion. By creating a custom dropdown like this instead of using a native <select> element, we are already sacrificing some accessibility features, such as being able to use the keyboard to select an element in the dropdown. I was willing to give up this accessibility feature only because this dropdown "looked nicer".

I do my best to limit the usage of external libraries or packages in order to keep things simple. If a package saves me a lot of time to implement or does something complex that I wouldn't be able to implement myself within a reasonable amount of time and effort, then that is when I would pull in a package.

I wish to keep this project as simple and lightweight as possible, for both developers and users.

Sorry, but I don't think I will be approving this pull request without the mentioned changes, given my reasoning behind it. I hope you understand.

(edits: I had some formatting issues with line breaks)

[Segergren]

Let me know if something looks off

[Segergren]

Absolutely! I tried changing it one more time by using <select> and <option> but it didn't work as expected with the CSS. Let's discuss UI changes on Discord in the future. Sorry if I came off as pushy.