Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Migration + Prettify #642

Open
6 of 25 tasks
sebadob opened this issue Dec 10, 2024 · 0 comments
Open
6 of 25 tasks

UI Migration + Prettify #642

sebadob opened this issue Dec 10, 2024 · 0 comments
Assignees
Labels
enhancement New feature or request

Comments

@sebadob
Copy link
Owner

sebadob commented Dec 10, 2024

This issue will keep track of the UI migration to Svelte 5 and making it prettier at the same time.

The current UI setup is a few years old and has some issues regarding DX and maintenance, as well as some CSS problems, accessibility is missing in lots of places, does not provide light / dark mode (tricky in combination with client branding), and uses a pretty complicated setup for i18n.

All of this will be solved and the work will be split into multiple PRs:

  • migrate everything to Svelte 5 (deps + syntax + features)
    • first step: make it work again with Svelte5 while using partially legacy syntax and function
    • migrate everything from JS to TS (where it makes sense)
    • re-create a new Svelte5 + TS version of each component in a separate folder
    • delete old style components and make sure no errors are thrown during compilation
    • move the new Svelte5 components into the original place after all dependencies have been migrated
    • finalize: get rid of all left-over legacy functions everywhere
  • change the way theming / branding is done and provide light + dark mode possibilities - the tricky party here is the branding of the login page which is individual for each client
    • create new theming backend with DB migrations, endpoints, caching, pre-compression
    • include the new theme in the UI and always preload the stylesheets
    • create a new component to modify custom themes
    • make it possible to manually override system prefs for theming
  • create a new structure for API communication in a type-safe way
  • simplify the i18n setup to make it easier to understand
  • improve accesibility
    • improve automatic focus and event handling in many situations
    • update all components to use proper aria labels and other things for screenreaders
  • improve performance and efficiency
    • move global CSS out of inline-style in each doc into cacheable, pre-compressed external css
    • move all static HTML serving endpoints into a separate module and implement dynamic compression + caching
  • prettify the UI
    • build a new Nav + SubNav for the Admin UI to make it fully responsive even down to mobile
    • improve visuals and make it prettier
  • get a better logo which makes it easier to identify the Rauthy tab in browsers
  • fix UI does not update when deleting attribute #672 during the migration
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant