feat: Improve circle mobile experience

[pymnh]

Changes

The circles integration in the contacts app is currently not very mobile friendly and the detail view a bit cluttered, especially on mobile. This PR tries to improve the mobile experience by ...

• streamlining the different means to update the settings (edit title/description vs editing invite/privacy settings):
  • Rewrite team settings from NcPopover to NcAppSettingsDialog
  • Move editable title/description to new NcAppSettingsDialog and simplify CircleDetails.vue
  • Use toggles instead of checkboxes
  • Add a "Manage settings" action to circles item in sidebar (and rename "Manage team" action to "Add members", which is more appropriate anyways)
• Some CSS fixes:
  • wrap action items
  • Emit "Team profile picture" from mobile view (circles do not have profiles pictures anyways so currently this really just wastes space - should probably be reintroduced once circles have configurable profile pictures?)

I changed PUBLIC_CIRCLES_CONFIG so that one item is an object ({ label: string, description?: string }) instead of a string to fix the awkward overflowing checkbox for CIRCLE_CONFIG_REQUEST. Not sure if this is the cleanliest way, but it seemed straightforward to me. Another option would be to just split the strings at newlines and use everything behind \n as description. But that is maybe not very stable.

Screenshots before

• Membership/privacy settings:
  

• Editing name and description:
  

• Sidebar actions button:
  

• Mobile view:

Screenshots afterwards

• Desktop circles view:
  

• Desktop settings modal:
  

• Sidebar actions menu:
  

• Mobile view:
  

[codecov]

Codecov Report

❌ Patch coverage is 0% with 123 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/components/CircleDetails/CircleSettings.vue	0.00%	116 Missing ⚠️
.../components/AppNavigation/CircleNavigationItem.vue	0.00%	6 Missing ⚠️
src/components/CircleDetails.vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[GVodyanov]

Also @kra-mo what do you think? Are you responsible for circles too? Thanks!

[kra-mo]

Thanks for the consideration, but the editing was made to be in a popover and inline on purpose. See for example https://modalzmodalzmodalz.com

Also see nextcloud/server#56841 (comment) for the actual wording that was supposed to be used inside the popover but that was never implemented… (And see that issue in general.)

The wrapping for the buttons is a nice fix, although the profile picture I'd just move to above the title so that when/if we do add pictures, it won't have to be reverted.

Toggles instead of checkboxes is also good at this point, but again, I'd keep them in the popover. It's not a particularly common pattern we have but along with the inline editing, it presents a much nicer spacial model.

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)