RFC: Some Web-UI ideas

[anbraten]

I would like to help bringing the UI to the next level. The UX can be approved a bit IMO and the development setup would love some care as well.

Some ideas:

• Start to convert Javascript Code to Typescript
• Update libraries
• Use Vite instead of Webpack
• Think if UI should stay with React or use something else (maybe Vue)

Maybe a design update would be nice as well 😉

[alexef]

I like the simplicity of the current UI. One quick fix would be to use a proper color (blue) to mark "running pipelines" as opposed to yellow which normally signifies a warning.

What are you proposing exactly in terms of design update?

[anbraten]

Main reason for a rewrite of the web-interface from my side would be an update of the code-base to use Typescript and some up-to-date dependencies. Especially Typescript can help a lot with code-quality.

I just started with an approach in #245.

Some design changes I played around with are:

• List latest jobs instead of repositories in the sidebar (I would add a search input to it, so commits or even repositories can be searched for)
• Move sidebar to right side and allow to open / close it (I think this would really help with smaller devices)
• Show enabled repositories at the "starting page" instead of all possible repositories and add a "enable new repository"-view (That list is really long in my case and I normally do not enable / disable projects on an every day basis)
• Move secrets, registry adjustments under repo-settings (same as above, should be easily reachable, but wouldn't be accessed to often)

A small taste of what I had in mind:

@alexef @6543
Would be nice if you could leave a comment if you generally like that idea / way or if you have some other ideas of updating / rewriting the UI.

As this would probably introduce a lot of changes, which could break things, I had the idea to either integrate both UIs (old one & new one) in the server and add an env-var / feature-flag so the user could switch himself until the new UI is stable enough, or to build two completely separate versions for both UIs.

[6543]

I would make current running tasks blues, so you can see a difference from tasks needing an aproval (orange)