feat: Add new Vue FilePicker from @nextcloud/dialogs and use it by default

[susnux]

• Part of 📍 File picker dialog improvements #38926
  • Resolves: File picker: remember last location/folder you were in, not start in root folder every time #39186
  • Resolves: File picker: ability to filter #39187
  • Resolves: File picker: left sidebar with the favorite folders for quick jumping #39188

Summary

(Still providing the legacy one until the Vue FilePicker is out of beta.)

Basically just use the new component from the dialogs package, see information in the PR nextcloud-libraries/nextcloud-dialogs#878

Screenshots

vokoscreenNG-2023-08-10_04-21-53.mp4

And on smaller screens:

TODO

• See list on the dialogs PR: Implement Vue based Dialogs especially the FilePicker nextcloud-libraries/nextcloud-dialogs#878
• Especially File picker: use same sort order as in the main Files view #39185 will come after the first beta.

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[AndyScherzinger]

(Still providing the legacy one until the Vue FilePicker is out of beta.)

but files will use the new one right-away?

[susnux]

but files will use the new one right-away?

Correct by default the new one is used everywhere.

[szaimen]

A bit feedback from design perspective:

1. Why is there an empty space between home button and plus button?
2. Why is there a checkbox to select folders?
   
3. On mobile, the seearch and multiselect looks distorted. They should probably be on different lines?
   

[jancborchardt]

Nice! :) Only 2 additional things besides @szaimen’s points:

• The loading skeleton screen elements are too dark on the background. We had a similar issue in Mail or elsewhere, I thought it was fixed in the components?
• The "Modified" column should be left-aligned like it is now in files. Only "Size" is right-aligned as it has numbers which can extend to the left, but modified is numbers + text.

[susnux]

Thank you for your feedback :)

@szaimen

Why is there an empty space between home button and plus button?

I think this is an issue with the nextcloud vue library as this is from the NcBreadcrumbs component.

Why is there a checkbox to select folders?

Currently there is always checkboxes shown (if multiselect is enabled then there is also a select all one in the table header).
Which brings up the question if this should be changed.

---

@jancborchardt

The loading skeleton screen elements are too dark on the background.

You are right, on darkmode I did not noticed it that much but I agree we should make them lighter.

The "Modified" column should be left-aligned like it is now in files.

Thank you, will change this :)

[szaimen]

Thanks @susnux! :)

Why is there an empty space between home button and plus button?

I think this is an issue with the nextcloud vue library as this is from the NcBreadcrumbs component.

I see, I can create an issue for this if you want :)

Why is there a checkbox to select folders?

Currently there is always checkboxes shown (if multiselect is enabled then there is also a select all one in the table header).
Which brings up the question if this should be changed.

Yes, I think so :)

---

Please dont forget my third point :)

On mobile, the seearch and multiselect looks distorted. They should probably be on different lines?

[susnux]

Please dont forget my third point :)

Yes 😅
I thought I had already fixed this but seems like the styling was not updated.

[skjnldsv]

Rebasing... done!

[skjnldsv]

If the cypress user test fails with Request failed with status code 500
It means the path given and returner by the picker is invalid :)

[skjnldsv]

Added a theming fix.
Now we need a new dialogs release and we should be good 🚀

[susnux]

should be ready to go?

Addressed

[skjnldsv]

Congrats!! 🎉 🎉 🎉