feat: Add interactive vue-based teams dashboard widget

[nfebe]

Before	After

Video

new-teams-widget.mp4

Resolves: #1938

[nfebe]

Notes

• Since we now used vue-based widget, it could be possible to move the js code to the contacts app
• Based on questions in : #1942 (comment) we could add tooltips that provide more context on file hovers.

[AndyScherzinger]

Looks good to me, just some minor comments to be checked with @jancborchardt

In the last call we decided to have the app icon on the bottom right of each resource to know its origin

The original mockup hat a right scroll ability on the list the above video shows a '+X' items visual instead which should be approved by designers.

In any way of doable as a quick follow up PR I'd be fine to merge.

[susnux]

This needs a build system for the vue components - the circles app is not available in Nextcloud build time!
(Also it should be then moved to the src directory rather then js)

[nfebe]

This needs a build system for the vue components - the circles app is not available in Nextcloud build time!
(Also it should be then moved to the src directory rather then js)

@susnux please see nextcloud/server#54467 (comment), if we can't use the core build system (like I added in server) then I think the best option would be to move this to the contacts app.

[kra-mo]

Looks nice, thank you for the effort.

Two things I'd change are:

1. If possible, increase the spacing between the members and resources list slightly.
2. Rename "Show more teams" to just "More teams".

we could add tooltips that provide more context on file hovers.

Yes, that would be really nice as filenames are not displayed at all at the moment as far as I can tell.

The original mockup had a right scroll ability on the list the above video shows a '+X' items visual instead which should be approved by designers.

This looks good to me, it's a good solution :)

[kra-mo]

Also, is the show more button using secondary styling? It's hard to tell. It should :)

Added the build system

[susnux]

(Took over due to vacations)

Added the build system:

• Add basic vite based build system
• Added ESLint workflow
• Added Typescript setup
• Fixed linter issues
• Added necessary CI workflows

Additionally to that I also used directly Vue 3 instead.

Content wise only following is changed:

• The changes requested by @kra-mo are now implemented (spacing and wording).
• As well as the button is secondary as requested.

[jancborchardt]

The font size of the team names could also be reduced to the normal text size (bolded) so there's more space to vertically separate the individual teams, like @kra-mo mentioned?

[susnux]

Included fixed for open issues:

• "If possible, increase the spacing between the members and resources list slightly." (@kra-mo )
• "Rename "Show more teams" to just "More teams"." (@kra-mo )
• "show more button using secondary styling" (@kra-mo )
• "add tooltips that provide more context on file hovers."
• "font size of the team names could also be reduced [...] so there's more space to vertically separate the individual teams" (@jancborchardt )