Rewrite of UI

[anbraten]

closes #246
closes #229
closes #266
closes #203
closes #191

Idea

Rewrite of the UI using Typescript, Vue3, Windicss (similar to Tailwind) and Vite. The design should be close to the current one with some changes:

• latest pipeline in a sidebar on the right
• secrets and registry as part of the repo-settings (secrets and registry entries shouldn't be used as much so they can be "hidden" under settings IMO)
• start page shows list of active repositories with button to enable / add new ones (currently you see all repositories and in most cases you only add new repositories once in a while)

TODO

• authentication
  • login
  • logout
  • login error page
  • handle token errors and re-login (an expired token will be removed by server, so no need to handle it by hand)
• own repo list
  • show active repos
  • show button to activate more repos
• add new repo
  • list inactive & active repos
• repo overview
  • show builds
  • show current build status (badge)
  • link vcs
  • show list of active branches
• build details
  • show jobs
  • show job logs
  • show details (since, duration)
  • link commit
  • build actions (cancel / re-start pipeline)
  • approve / decline pipeline
  • show artifacts and download links
• repo settings
  • secrets
  • registry
  • delete / deactivate repo
  • general settings
• user settings
  • show own token / cli setup
• layout
  • build-feed (right sidebar)
    • open / close
    • improve item view
    • listen to updates
    • add search to filter by repo, commit message
  • navbar
    • show amount of currently active & pending pipelines (click on it to open / close sidebar)
• permissions
  • show login button if not authenticated
  • don't show hidden repos (redirect if access)
  • don't show buttons / views if missing permissions
    • settings
    • hide active jobs & sidebar if not authenticated
    • build actions (restart, cancel, ...)
• ci (add some new ci jobs)
  • check format with prettier
  • check linting
  • check types
• misc
  • link docs
  • show current version
  • icons
  • confirm dialogs
  • add toast for every save / await call
  • support emojis in commit-messages
  • handle errors and toast them
  • add some eslint config
  • allow to set docs url again
  • fix tabs
  • check color contrasts
  • running gif need transparent background
  • increment time of running builds
  • show no builds in sidebar if empty
  • only show "own" repos in repo-add and repo-list (repos you have at least push access to) Fix repo access #476
  • add search for repo list

Before merging

This PR includes some changes introduced by following PRs. So they have to be merged before this one gets merged.

• Use server-host as source for public links and warn if it is set to localhost #251
• Replace www-path with www-proxy option for development #248
• Move api-routes to separate file #434
• Simplify routes #437
• Add repo permission endpoint #436

Follow Ups

• remove WithDocs
• remove template execution for index.html => simply serve static file

Screenshots

[6543]

could not find any issue in the code and it looks amazing.

I think there are 1-2... bugs/issues still hidden somewhere but that can be fixed in followups.
This do really bring things forward and fix a lot :)

[davidak]

@6543 one check failed https://wp.laszlo.cloud/woodpecker-ci/woodpecker/1079/14

[davidak]

Great work. Thank you @anbraten!

[6543]

forward thanks to @anbraten ;)

[davidak]

@6543 ah, sure. you only merged it