GUI Module

[johnbotris]

As part of our goal of extracting parts of the code base to improve code sharing (see: https://github.com/tutao/tutanota/issues/3194) We want to create a module for base GUI components.

This should mostly be moving the contents of src/gui/base into it's own module.

Things to consider as part of this:

• all global singletons need to be not referenced from these components (namely: styles, theme, sizes, lang, but also others)
  • Some ideas for dealing with lang
    • pass in only resolved strings rather than translation keys to base components, pass in date formatters. This could lead to lots of annoying boilerplate
    • define a global interface (TextProvider and Formatter or something). GUI module expects some global singleton to be defined which implements the interface, and the implementation is done by the app. (would reduce the boilerplate and amount of changes done during the implementation, but we would have to define the interface in both the main and admin clients (probably not a huge problem)
  • theme, sizes, styles might be made obsolete by https://github.com/tutao/tutanota/issues/4215
  • any other model singletons just need to be replaced with injection (no need for new interfaces, just pass in whatever data was required from them in the first place)
• Look around for other good base component candidates that might no be in src/gui/base
• Update the Icon code generator in the next repo
• Consider https://github.com/tutao/tutanota/issues/2559, some improvements might fall out in the process

[charlag]

While I think CSS variables would be even better (hopefully not slower) I think some singletons don't even hurt that much. styles, theme, sizes can all just live in GUI module. We did the same with crypto and randomizer where it arguably makes even less sense.

I think providing some translation provider to the GUI module during init is also a good idea.

[charlag]

A bit on how themes can be injected into gui library: https://mui.com/joy-ui/customization/approaches/