chore(webapp): migration to vuetify 4

[Ph0tonic]

Hey,
I tried to upgrade to vuetify 4 but I also needed to upgrade:

• vue-router 5
• pinia 4

I removed vue-demi which did not seemed to be used.

I also update the qrcode-vue inlined repo to a vue3 version, allowing to simplify it's vue integration.

Replaces #1211

[peterthomassen]

Thanks for doing this, this looks pretty good!

I didn't find any functionality that broke, but there are several changes in how things look. Some of that is fine (for example, whether the sign-up button is uppercase or lowercase), but others are more significant for flow / smooth perception:

• In a large browser window, the padding to the left/right of the main body text is gone
• Sometimes there is weird spacing, such as between the checkboxes in the sign-up form
• Sometimes, fonts have wrong size. Example: in the domain list, click on the (i) to see configuration details. The "copy" buttons have significantly oversized labels

If you have some time, would you mind "playing through" as much GUI functionality as you can, and note down if you spot anything odd? There's no need for immediate fixes; the list will suffice for a start. We can then see what's easy to fix / significant or not / where assisted coding can help etc.

🙏

[Ph0tonic]

Hey @peterthomassen,

I played with the UI and fixed everything I could find.

I also made a change to the switches: I noticed it was hard to tell whether they were on or off, so I gave them a color (Vuetify 4 dropped the default accent color on switches, so they render grey either way now). It makes the state much easier to read at a glance.

Let me know what you think!