Fix/ui-rerendering

[iX315]

Since the UI has a lot of re-renderings because of the props drilling and the massive Dashboard hook.
I would recommend to use a store like zustand for easy usage but jotai does it as well.

The code will be massively changed if applied to every state from useDashboardUIState.ts, so before continue on this I would know if it's within your scope.

Summary

What does this PR change and why?

Target branch

• This PR targets develop (required)

Type of change

• Bug fix
• Feature
• Refactor
• Docs / tooling

How to test

Steps to validate the change:

Checklist

• I ran npm run typecheck:all
• I ran npm run test:unit 125/125 passed
• I ran npm run build:renderer (or explain why not)
• I updated docs if needed
• I added/updated tests if needed

Notes for reviewers

Anything risky, or areas to pay attention to:

Review context (please read / use as ground truth)

• README.md
• MODULE_DEVELOPMENT.md
• CONTRIBUTING.md
• RUNTIME_TS_TESTING_GUIDELINES.md

[aagentah]

Many thanks for putting this in place, and apologies for the delay in getting back. I'm going to think about this as a feature. Like you say, this is a significant refactor to consider, but I agree that the way components have scaled has resulted in some not-so-nice props drilling. It's possible we could roll out this feature specifically just for the Modals and see how things go from there!

[iX315]

@aagentah give it a try, now the UI is still flashing because of the other states (need to go deeper...)

I tried the UI in the main nav and the buttons I could use. Running the e2e test I still have some errors (maybe because of linux?). Could you double check everything?

[aagentah]

@iX315 Thank you for this, I'll give it a go! You mentioned the "UI is still flashing".

Is the screen visibly flashing for you? And was that the inspiration for the original pull request?

If so, I might have to look deeper as I'm not getting this on Windows or MacBook.

Are you using WSL with Linux? Maybe I should spin it up on there and make sure that everything's looking good. If you have any screen recordings of what's happening, that would also be super helpful.

[iX315]

Sorry my mistake, by flashing I mean the components are re-rendering frequently - even there is no need.
I use the react dev tools function with the "Highlight updates when components render".
So with my update the UI is a bit more stable.

I use ubuntu linux and the app is running only if I add requestMIDIAccessFunction: () => true as option of webMidi.enable in the input manager - but this is another thing I will research why...